28
HTML Introduction DSC340 Mike Pangburn
| Date post: | 24-Dec-2015 |
| Category: |
Documents |
| Upload: | rosalyn-allen |
| View: | 223 times |
| Download: | 1 times |
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 text
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 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 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 <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
