THE WORLD WIDE WEB, WEB DESIGN The World Wide Web, abbreviated as WWW or W3, is a worldwide network and system of electronic hypertext document pages formatted in markup or script languages. It was invented by Tim Berners-Lee in 1990. He discovered a way to move to different files on his computer using the links between them. He wrote a coding system to create links to files on any computer connected to the network and also invented the first browser. Web page, website, domain name Web pages and websites consist of different components, for example text, graphics or multimedia features. They also have several design elements such as header, footer, sections, links, navigation bar, sidebars, main content, etc. A web page is a hyperlinked document in a web network system, i.e. it contains links to other documents. A website is an area or place connected to the Internet consisting of several related web pages linked together and accessed by its own unique Internet address which identifies a computer or service in the network. IP addresses are numeric, therefore a naming system called the Domain Name System was created with domain names which are easier to remember and meaningful to people. DNS has a hierarchical structure and translates domain names into IP addresses. The domain name is also a part of the URL. The main or starting page on a website is called homepage which contains links to other pages (hyperlinks). A hyperlink means a link in a hypertext document connected to another web page or file which is displayed when clicking on it. URL A URL, short for Uniform Resource Locator, is the address of a resource that identifies the resource and specifies its location on the Internet. It is informally called a web address. Each web page has its URL. A URL commonly begins with a protocol. The protocol prefix http://\s often hidden. Forward slashes and dots are used to separate subareas and parts of an address. HTTP means HyperText Transfer Protocol, HTTPS is a protocol for secure communication over a network which is more required. The main parts are: • protocol prefix, e.g. http://, https://, ftp:// • web service • domain name • top-level domain (TLD) which can be national (country code, e.g. cz for the Czech Republic) or generic (types of organizations) • directories and path where the web page is located • the document name or the filename, and file extension http:// www. informatorium.cz _\_ /katalog-knih/ protocol prefix web service domain name top level domain directory (country code) path URL structure There can also be other options, e.g. username, password, fragment, an optional query, etc. Types of organizations (generic TLD) .com commercial .edu educational .eu EU domain ■gov US government .net network provider or host •org non-profit and other organization Web browser, search engine To find a web page you can enter a URL into a web browser's address bar or address box, or you can use search engine where you type in a keyword. To switch between web pages you can use tabs. Each tab shows a different web page. A browser is a program or software application that allows the user to access and view web pages on the Internet. Widely used web browsers are e.g. Chrome, Firefox, Edge, Internet Explorer, Safari, etc. There are also mobile browsers. A typical browser window has these features: • address bar which displays the current webpage address • toolbar with button icons • search box or search bar • settings, tools, etc. Most buttons of the toolbar are for navigation: Back displays the previous webpage, Forward displays the next webpage, Refresh refreshes the current webpage display, Home returns to the first or starting page, Stop cancels loading. A search engine is a program which scans the Web for the information you need, using keywords, e.g. Google, Bing, Seznam. It reads keywords written in the search box and searches for web pages, resources and other Internet files. The documents are shown as result pages in a result listing. The web content can also be accessible by voice search (voice commands). An overview of common web browsers Browser Google Chrome Microsoft Edge e Mozilla Firefox 'S* Opera : Vivaldi 0 Apple Safari Default search engine Google Bing Google. Yahoo Google Google Google, Yahoo, Bing Web design VOCABULARY When designing webpages, a designer must take several factors into consideration: layout, design elements, navigation, easy to use, up to date, number of links on a page, etc. Webpages can be static or dynamic. For creating static hypertext documents web designers use markup languages, such as HTML and CSS that use coded instructions called markup tags. HTML, short for Hypertext Markup Language, uses a system of pre-defined tags. HTML tags are codes to define text fonts, format paragraphs, add links, etc. They are attached to a piece of a text and surrounded by the angle brackets. Left angle bracket (<) marks the start and right angle bracket (>) marks the end of a tag. E.g. , , <body>, <p>. For creation of dynamic web pages scripting languages are necessary, such as JavaScript, VBScript, PHP, ASP, Python, etc. Scripts are small programs that are embedded in HTML documents. There is also a large collection of pre-built website templates designers can choose from. They allow anyone to create their own website without needing to design it and converting into code. Open-source templates save your time and also money. A web editor is a software program that lets you design web pages without writing HTML codes. address bar /adresba:r/ browser / brau.zar/ domain name /da mein neim/ domain name system /da'mein neim sis.tarn/ homepage / haumpeid3/ HTTP /eitj.ti:.ti:pi:/ hyperlink / hai.pa.lirjk/ path /pa:6/ result listing /n'ZAlt lis.tirj/ search box /'sstj ,bDks/ search engine / S3.tf en.d3in/ tag /taeg/ template / tem.pleit/ / templst/ top-level domain /tDp lev.al da mein/ Uniform Resource Locator /,ju:.ni.fo:m n zos lau.kei.tar/ voice search /'vois S3 tf/ web address /webadres/ web design /web di zain/ web page, webpage / web peid3/ website /'web.sait/ adresní řádek webový prohlížeč doménové jméno systém doménových jmen domovská stránka hypertextový přenosový protokol hypertextový odkaz (adresářová) cesta výsledný seznam odkazů vyhledávací řádek vyhledávač značka v jazyce HTML šablona doména nejvyšší úrovně jednotné označení zdroje hlasové vyhledávání adresa webové stránky návrh webové stránky webová stránka webové stránky, webové místo