HTML Jan 13 2019 What is the World Wide Web The World Wide Web WWW is most often called the Web The Web is a network of computers all over the world All the computers in the Web can communicate with each other All the computers use a communication standard called HTTP Hypertext Transfer Protocol 2 How does the WWW work Web information is stored in documents called Web pages Web pages are text files stored on computers called Web servers Computers reading the Web pages are called Web clients Web clients view the pages with a program called a Web browser Popular browsers are Internet Explorer Netscape Navigator Communicator Safari Mozilla Konqueror and Opera Other browsers are Omniweb iCab etc 3 How does the browser fetch pages A browser fetches a Web page from a server by sending a request A request is a standard HTTP request containing a page address A page address looks like this http www someone com page html A page address is a kind of URL Uniform Resource Locator 4 How does the browser display pages All Web pages are ordinary text files All Web pages contain display instructions The browser displays the page by reading these instructions The most common display instructions are called HTML tags HTML tags look like this p This is a Paragraph p 5 Who makes the Web standards The Web standards are not made up by Netscape or Microsoft The rule making body of the Web is the W3C W3C stands for the World Wide Web Consortium W3C puts together specifications for Web standards The most essential Web standards are HTML CSS and XML The latest HTML standard is XHTML 1 0 6 What is an HTML File HTML stands for Hypertext Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension html is preferred htm extensions are used by servers on very old operating systems that can only handle 8 3 names eight characters dot three characters An HTML file can be created using a simple text editor Formatted text such as Microsoft Word s doc files cannot be used in HTML files 7 HTML Tags HTML tags are used to mark up HTML elements HTML tags are surrounded by angle brackets and Most HTML tags come in pairs like b and b The tags in a pair are the start tag and the end tag The text between the start and end tags is the element content The tags act as containers they contain the element content and should be properly nested HTML tags are not case sensitive b means the same as B XHTML tags are case sensitive and must be lower case To ease the conversion from HTML to XHTML it is better to use lowercase tags 8 Structure of an HTML document An HTML document is contained within html tags It consists of a head and a body in that order The head typically contains a title which is used as the title of the browser window Almost all other content goes in the body Hence a fairly minimal HTML document looks like this html head title My Title title head body Hello World body html 9 HTML documents are trees html head body title My Web Page This will be the world s best web page so please check back soon Under construction 10 Text in HTML Anything in the body of an HTML document unless marked otherwise is text You can make text italic by surrounding it with i and i tags You can make text boldface by surrounding it with b and b tags You can put headers in your document with h1 h2 h3 h4 h5 or h6 tags and the corresponding end tag h1 through h6 h1 is quite large h6 is very small Each header goes on a line by itself 11 Whitespace Whitespace is any non printing characters space tab newline and a few others HTML treats all whitespace as word separators and automatically flows text from one line to the next depending on the width of the page To group text into paragraphs with a blank line between paragraphs enclose each paragraph in p and p tags To force HTML to use whitespace exactly as you wrote it enclose your text in pre and pre tags pre stands for preformatted pre also uses a monospace font pre is handy for displaying programs 12 Lists Two of the kinds of lists in HTML are ordered ol to ol and unordered ul to ul Ordered lists typically use numbers 1 2 3 Unordered lists typically use bullets The elements of a list either kind are surrounded by li and li Example The four main food groups are ul li Sugar li li Chips li li Caffeine li li Chocolate li ul 13 Attributes Some markup tags may contain attributes of the form name value to provide additional information Example To have an ordered list with letters A B C instead of numbers use ol type A to ol For lowercase letters use type a For Roman numerals use type I For lowercase Roman numerals use type i In this example type is an attribute 14 Links To link to another page enclose the link text in a href URL to a Example I m taking a href http www cis upenn edu matuszek cit597 html Dr Dave s CIT597 course a this semester To link to another part of the same page Link text will automatically be underlined and blue or purple if recently visited Insert a named anchor a name refs References a And link to it with a href refs My references a To link to a named anchor from a different page use a href PageURL refs My references a 15 Images Images pictures are not part of an HTML page the HTML just tells where to find the image To add an image to a page use img src URL alt text description width 150 height 100 The src attribute is required the others are optional Attributes may be in any order The URL may refer to any gif jpg or png file Other graphic formats are not recognized The alt attribute provides a text representation of the image if the actual image is not downloaded The height and width attributes if included will improve the display as the page is being downloaded If height or width is incorrect the image will be distorted There is no img end tag because img is not a container 16 Tables Tables are used to organize information in two dimensions rows and columns A table contains one or more table rows tr Each table row contains one or more table data cells td or table header cells th The difference between td and th cells is just formatting text in th cells is boldface and centered Each table row should contain the same number of table cells To put borders around every cell add the attribute border 1 to the …
View Full Document
Unlocking...