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 file 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 files 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) file that contain code that defines 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 identifies 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 Content affected by the tag  Tags usually come in pairs: an opening tag and a closing tag. Some exceptions:  tag has optional  tag has no corresponding  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: Some text more text and more. No: Some text more text and more.

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

Special tags within HEAD defines the title of the document. Example: Title of my web-page This tag is optional but should always be included to assist the user in navigating the browser’s history list. defines style information for an HTML document. (Will spend more time on this later!) provides metadata about the HTML document. Example: Specifies keywords to assist indexing of the page by search engines

Format: bold, italic, and underline  Bold  Italic  Underline  You can apply more than one e.g., Just Do It! produces: Just Do It!

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

Text formatting tags

Other HTML tags  Horizontal rule. Draws a thin solid horizontal line on the web page. No closing tag.  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 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. Large, red text

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

Links with anchor text Two sides of a hyperlink  Anchor text The highlighted text in the current document  Hyperlink reference The URL address  Usage anchor text e.g., Click here displays as: Click herehere

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:

URL address  The Internet address portion of a URL can be either a name, e.g. or an IP address, e.g  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 includes no filename, so a (typical) webserver inserts the default name:

Relative vs Absolute links  If a URL omits the Internet address portion, then the file path portion can be either relative or 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

Example  Let’s put link with file Frames.html to Catalog2014.pdf  When viewing Frames.html the browser must be in the products folder  Relative link  our 2014 catalog  Absolute link (directions start from absolute top)  our 2014 catalog sales public_html costs productsbrochures Frames.xls Parts.xls Catalog2014.pdfParts.htmlFrames.html financehome Absolute top of server’s “URL space”

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 home was the highest folder  So, the starting slash / took the browser into the home folder  It is standard to not type 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

Attributes in HTML  Some tags can be qualified by attributes that provide needed additional information or change the default properties of the tag. The general syntax is: Some text  Attributes are specified within the angle brackets following the opening tag name.  Examples:  (default justification is left) 

Showing pictures  Image Tag Format: 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

Clickable pictures  Pictures can be used as links by combining tag with an anchor tag  Here, the 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”

Handling tables  Table:  Rows:  Cells:  Caption:  Column headings:  Example: A B C Dan Jen Pat Mary Tim Bob Will display as: A B C Dan Jen Pat Mary Tim Bob

Controlling text with 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

Handling lists  Unnumbered (bulleted) list: - and tags begin and end the list - and tags begin and end the items within the list  Ordered (numbered) list: - and tags begin and end the list -Uses the same tags  Sublists: Insert lists within lists (between tags)

Lists Example 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 Gets rendered as (browser indents each list some) 1. Hydrogen, H, 1.008, 1 2. Helium, He, 4.003, 2 Good for balloons Makes you talk funny 3. Lithium, Li, 6.941, Beryllium, Be, 9.012, 2 2