html introduction
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
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
<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> defines 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> defines 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
Format: bold, italic, and underline 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!
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>
Special symbols 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 -
Links with anchor textTwo 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 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 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 <a
href="../brochures/Catalog2014.pdf”>our 2014 catalog</a>
Absolute link (directions start from absolute top) <a
href=”/sales/brochures/catalog.pdf”>our 2014 catalog</a>
sales
public_html costs
products brochuresFrames.xls Parts.xls
Catalog2014.pdfParts.htmlFrames.html
finance
homeAbsolute 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:
<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" />
Showing pictures Image Tag Format:
<img src="filename" alt=“description" />
1. src short for source2. alt gives text to print when image can’t be
loaded3. 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 <img> tag with
an anchor tag
<a href="fullsize.jpg”><img src="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”
Handling tables 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 CDan Jen PatMary 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:
- <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)
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)1. Hydrogen, H, 1.008, 12. Helium, He, 4.003, 2
• Good for balloons• Makes you talk funny
3. Lithium, Li, 6.941, 2 14. Beryllium, Be, 9.012, 2 2