HTML Introduction

HTML Introduction DSC340 Mike Pangburn

What is HTML? • HTML: Hyper Text Markup Language • The predominant markup language for web-page design. • A markup language is a set of markup tags. • File extensions: .html, .htm • Information stored in an html ﬁle can be viewed in a browser.

Why HTML? • It is platform independent: • Pages can be viewed using a variety of different computers and browsers. • It allows convenient linking from one page to another. • Html ﬁles are small since they store the structure of the document, not its precise appearance. • Html is open to everybody. It is not owned by a company.

An HTML document • HTML document is a plain text (ASCII) ﬁle that contain code that deﬁnes a web page. • We can peak at the code for any page using the “View → Page Source” option in a browser. • The contents can be divided into two categories: • Content: material which the user sees when visiting the page. • Meta-information: information about the document: its structure, formatting, etc. • Meta-information is distinguished from content by tags.

HTML tags • A tag identiﬁes a page element’s type, format, and appearance. • Unknown tags are ignored. • This rule allows new tags to be introduced without causing problems for older browsers. It also means you need to be careful to spell tag names correctly! • Tags are enclosed in angle brackets <tag-name> Content affected by the tag </tag-name> • Tags usually come in pairs: an opening tag and a closing tag. Some exceptions: • <p> tag has optional </p> • <br> tag has no corresponding </br> • Tag names are case-insensitive. • Style recommendation: Be consistent.

Nesting of tags • Opening and closing tags define regions affected by the tags. These regions must nest, not overlap. Yes: <tag1>Some text <tag2>more text</tag2> and more.</tag1> No: <tag1>Some text <tag2>more text</tag1> and more.</tag2>

Structure tags • There are important one-per-document tags: <html> </html> Tells the browser that this is an HTML document. All other tags are placed in html tag. <head> </head> Contains information about your page. Everything in the head portion is meta-information, not content. <body> </body> Contains the content of your page.

Special tags within HEAD <title> </title> deﬁnes the title of the document. Example: <title> Title of my web-page </title> This tag is optional but should always be included to assist the user in navigating the browser’s history list. <style> </style> deﬁnes style information for an HTML document. (Will spend more time on this later!) <meta> provides metadata about the HTML document. Example: <meta name="author" content=”Mike Pangburn" /> Example: <meta name=”keywords" content=”word, phrase, etc" /> Specifies keywords to assist indexing of the page by search engines

Bold <b></b> Italic <i></i> Underline <u></u> You can apply more than one e.g., <b><i>Just Do It!</i></b> produces:Just Do It! Format: bold, italic, and underline

Heading tags <h1>Main heading</h1> - Formats the enclosed text as a prominent large, bold heading. <h2> </h2> heading style a bit less large than h1 <h3> </h3>heading style a bit less large than h2 <h4> </h4>heading style a bit less large than h3 <h5> </h5>heading style a bit less large than h4 <h6> </h6>heading style a bit less large than h5 Examples: <h1>This is header 1 </h1> This is header 1 <h6>This is header 6 </h6> This is header 6

Text formatting tags

Other HTML tags • <hr> Horizontal rule. Draws a thin solid horizontal line on the web page. No closing tag. • <br>Line break. Creates a line break (effectively hitting a “return key”). Use this where the extra line spacing of a paragraph tag is not desirable. No closing tag. • Comments: these consist of any text enclosed within . Their purpose is to enlighten the web programmer reading the HTML. They do not appear in the rendered page.

The “font” tag • The <font> tag. • In the early days of web design, this tag was introduced to allow the web programmer to control the font family, typeface, color, etc. • This tag is now considered obsolete. Cascading style sheets (CSS) provide much better control over style and compatibility. We will cover CSS later • However, many web pages still use this tag for simple effects such as text size and color. <font size="+1" color="red">Large, red text</font>

What if we want to show a math relationship as: 0 < p > r • So the XHTML would be <i> 0 < p > r </i> • Special characters < displays as < > displays as > & displays as & non-breaking space &mdash displays as - Special symbols

Two sides of a hyperlink • Anchor text The highlighted text in the current document • Hyperlink reference The URL address • Usage <a href=“url”>anchor text</a> e.g., Click <a href=http://www.microsoft.com> here</a> displays as: Click here Links with anchor text

Links and URLs • The link target, or href (hypertext reference) is in the form of a URL: Uniform Resource Locator. • A URL has 3 components, not all of which need to be supplied in every reference: • A protocol • An Internet address (either name or IP number) • A file path Example: http://infographics.uoregon.edu/campusMaps/nightmap.pdf

URL address • The Internet address portion of a URL can be either a name, e.g. www.uoregon.edu, or an IP address, e.g. 128.223.142.125 • If omitted, the address of a URL reference within an HTML page is assumed to be the same as the address for the document containing the link. • Thus if the address is omitted from a link in a web page, the link refers to a document on the same server that served that page. • A URL without an address portion can be either absolute or relative, as explained next.

URL file path • The file path portion of a URL optionally specifies the chain of directories (folders) in which the document is located, and the name of the file itself. The directory names in the chain are separated by slash characters. • If the file name portion of the path is omitted, then it defaults to a value that is defined by the server, typically index.html. Example: the URL http://www.myplace.com/shopping/fruit/ includes no filename, so a (typical) webserver inserts the default name: http://www.myplace.com/shopping/fruit/index.html

Relative vs Absolute links • If a URL omits the Internet address portion, then the file path portion can be either relativeor absolute. • Relative provides path directions to the browser relative to the folder where the browser is currently looking (i.e., relative to the current folder) • Absolute provides path directions to the browser starting from the absolute top of the folder hierarchy

Let’s put link with file Frames.html to Catalog2014.pdf • When viewing Frames.htmlthe browser must be in the products folder • Relative link • <ahref="../brochures/Catalog2014.pdf”>our 2014 catalog</a> • Absolute link (directions start from absolute top) • <ahref=”/sales/brochures/catalog.pdf”>our 2014 catalog</a> Example Absolute top of server’s “URL space” brochures products finance home sales costs public_html Frames.xls Parts.xls Frames.html Parts.html Catalog2014.pdf

Notes on Relative vs Absolute links • How do you signal that you want your directions to be interpreted as the absolute or relative type? • If the directions are absolute, then start the directions with a slash / • If relative, do not start with slash • When starting with the slash / the browser will go to whatever folder is configured in the webserver as the absolute top folder • Sometimes that folder is set as public_html folder, but not always • In the example, the server was configured such that the folder named homewas the highest folder • So, the starting slash / took the browser into the homefolder • It is standard to nottype public_html within links, because it is by default the (only) web-accessible folder, so the web-server automatically directs the browser to that folder

Some tags can be qualiﬁed by attributes that provide needed additional information or change the default properties of the tag. The general syntax is:<tag-name attribute1="value" attribute2="value”> Some text </tag-name> • Attributes are specified within the angle brackets following the opening tag name. • Examples: • <p align="center"> (default justification is left) • <hr width="50%" size="3" /> Attributes in HTML

Image Tag Format: <imgsrc="filename" alt=“description" /> 1. src short for source 2. alt gives text to print when image can’t be loaded 3. Absolute and relative pathname rules apply This tag will cause an image simply to be displayed on the Web page Showing pictures

Pictures can be used as links by combining <img> tag with an anchor tag <a href="fullsize.jpg”><imgsrc="thumbnail.jpg" /> </a> Here, the <img …> picture becomes the “hot spot” for the anchor tag (rather than text) The browser will display the picture “thumbnail.jpg” then allow the user to click on the picture as a link to the file “fullsize.jpg” Clickable pictures

Table: <table></table> • Rows: <tr></tr> • Cells: <td></td> • Caption: <caption></caption> • Column headings: <th></th> • Example: <table> <tr><th>A</th><th>B</th><th>C</th></tr> <tr><td>Dan</td><td>Jen</td><td>Pat</td></tr> <tr><td>Mary</td><td>Tim</td><td>Bob</td></tr> </table> Will display as: A B C Dan Jen Pat Mary Tim Bob Handling tables

Tables can control arrangement of information on a page • e.g., a series of links listed across the top of the page could be placed in a one-row table to keep them together • Use no borders, you get alignment and order • If the window is too small to display all the links, table keeps them in a row and a scroll bar is added • If the tags are not in a table, the links will wrap to the next line instead Controlling text with tables

Unnumbered (bulleted) list: • <ul> and </ul> tags begin and end the list • <li> and </il> tags begin and end the items within the list • Ordered (numbered) list: • <ol> and </ol> tags begin and end the list • Uses the same <li> tags • Sublists: Insert lists within lists (between <li> </li> tags) Handling lists

Lists Example <ol> <li> Hydrogen, H, 1.008, 1 </li> <li> Helium, He, 4.003, 2 </li> <ul> <li> good for balloons </li> <li> makes you talk funny </li> </ul> <li> Lithium, Li, 6.941, 2 1 </li> <li> Beryllium, Be, 9.012, 2 2 </li> </ol> Gets rendered as (browser indents each list some) • Hydrogen, H, 1.008, 1 • Helium, He, 4.003, 2 • Good for balloons • Makes you talk funny • Lithium, Li, 6.941, 2 1 • Beryllium, Be, 9.012, 2 2

HTML Introduction