61
HTML Cyndi Hageman
| Date post: | 14-Dec-2015 |
| Category: |
Documents |
| Upload: | cody-crosse |
| View: | 215 times |
| Download: | 0 times |
HTML
Cyndi Hageman
The Internet
The internet is a worldwide collection of computer networks sharing information via a common set of networking and software protocols.
History
1960’s – funded by the Department of Defense – they wanted computers that could communicate in spite of a nuclear attack.
ARPAnet was available and used by defense conractors and academic institutions.
1990’s businesses wanted it opened up for unrestricted traffic.
History (cont.)
Internet was too disorganized – it was hard to connect and the information was sent in pieces.
CERN came up with HTML browser software that unified text, graphics and sounds
NCSA at the University of Illinois created Mosaic, the first web browser to interpret HTML. It was free.
How it all works
Every computer is identified by a number. Numbers are too difficult to remember so every site is also identified by name.
http – Hypertext Transfer Protocol is the means of transferring web pages. The client requests a page, the page is sent to the client from the server via http
How it all works (cont.)
www is the prefix (world wide web) Domain name – the unique given
name of a web site Domain
.com commercial .net internet service provider .org nonprofit organization .edu educational institution .gov US government
W3C
World Wide Web Consortium Define the standard of HTML and
XHTML Standardize any technology related
to the web css Xml http
Things to Know
Window – the browser window that opens
Web page/document – the content of a page that is displayed in a window
url – uniform resource locator – web page address
HTML vs. CSS
HTML and XHTML are all about structure of a web page. It lays out how the content of the web page are to appear.
CSS makes that content look good. CSS is all about appearance.
HTML Tags
HTML is created by using tags. Most tags have an opening tag and
a closing tag and you place the content between the tags.
There are some that do not require a closing tag in HTML.
XHTML vs. HTML
The highest level of HTML is 5http://webdesign.about.com/od/html5/qt/what_is_html5.htm
The next generation is XHTML 1.0. XHTML
Lower case All tags need a closing tag Tags must be properly nested
Basic HTML Document
<html><head>
</head><body>
</body></html>
Basic XHTML Document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=“http://www.w3.org/1999/xhtml><head>
</head><body>
</body></html>
XHTML
Like HTML but uses DTD to define XML elements
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
XHTML
Nested Tags Same as current HTML <b>This statement is <i>itallic</i></b>
End Tags are required <p></p> <br /> <input type = “text” name=“txtName” />
XHTML
Case sensitive All html tags need to be lower case
Attributes in Quotes All attribute values must be in double
quotes <table name=“tblTableOne” cols=“3”
rows=“5” width=“500”>
XHTML
Explicit Attribute values All attributes must have a value <option “IA” selected=“selected”> <input type=“radio” name=“rdoMF”
value=“M” checked=“checked”> Special Characters
Put javascript in external files <img src=“saltandpepper.jpg” alt=“Salt
& Pepper”> See appendix F for character definitions
XHTML
Name vs. Id XHTML has a strong preference for the
Id tag If you have to use the name attribute
for a tag, then also add the id attribute
DTD
The doctype declaration should be the very first thing in an HTML document, before the <html> tag.
The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.
The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers can render the content correctly.
DTD
HTML 4.01 Strict contains all HTML elements and
attributes, but does not include presentational or deprecated elements (like font). Framesets are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DTD
HTML 4.01 Transitional contains all HTML elements and
attributes, including presentational and deprecated elements (like font). Framesets are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
DTD
HTML 4.01 Frameset equal to HTML 4.01 Transitional, but
allows the use of frameset content. <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
DTD
XHTML 1.0 Strict contains all HTML elements and
attributes, but does not include presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
DTD
XHTML 1.0 Transitional contains all HTML elements and
attributes, including presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DTD
XHTML 1.0 Frameset equal to XHTML 1.0 Transitional, but
allows the use of frameset content. <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
DTD
XHTML 1.1 equal to XHTML 1.0 Strict, but
allows you to add modules (for example to provide ruby support for East-Asian languages).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<title></title>
Located in the <head></head> Used to give a title to the page. It
shows up in the browser window. Helps web search engines to find
your page.
Comments
You should always put comments in your code to define your page. You may not be the one maintaining the page after it is built.
<!-- put comments here --> Comments are ignored by the
browser but can be seen when the client views the source.
Headings
Heading tags are used to put titles or subtitles on your page.
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
Text
You can separate or distinguish text in different ways <p></p> - paragraph – puts one blank line
after the text <br> - line break – moves text to the next line
with no blank line between <div></div> - allows you to divide your page
in sections – puts one blank line after text <span></span> - allows you to distinguish
inline text to apply a style or format.
italic
<i></i> - physical element that will make the text italic.
<em></em> - logical element that will make the text italic and will make the text accessible to screen readers.
bold
<b></b> - physical element that makes text appear bold.
<strong></strong> - logical element that makes text appear bold and is accessible to screen readers.
Nesting Elements
Elements need to be nested properly to be displayed properly by the browser and to be validated correctly
The tag that is opened first, must be closed last<p>The article will be featured in the <b>Cedar Rapids Gazette</b></p>
Other Content Tags
<address></address> - text is an address and is displayed in italic
<blockquote></blockquote> - indents the text on the left and right and some browsers display in italic
<cite></cite> - indicates a citation or reference and displays in italic.
Page 77 for more content tags
Character Entities
Begin with & and end with ; Examples
® registered symbol © copywright symbol non-breaking space « left-pointing double angle
quotation mark ¼ one quarter fraction ½ one half fraction ¾ three quarters fraction
Character Entities (cont.)
http://www.evolt.org/article/ala/17/21234/
http://htmlhelp.com/reference/html40/entities/
Horizontal Rule
<hr /> Provides a line on the page give a
visual separation You can set attributes within the tag
to determine appearance such as size and color.
Text Size
<big></big> - makes the text one size bigger than the default.
<small></small> - makes the text one size smaller than the default.
Unordered Lists
Lists items using a bullet or an image in place of a bullet
<ul><li>item 1</li><li>item 2</li><li>item 3</li>
</ul>
Ordered List
Lists items with numbers, letters or roman numerals
<ol><li>item 1</li><li>item 2</li><li>item 3</li>
</ol>
Definition List
Used to create a glossary or FAQ page
<dl> <!--definition list --><dt> <!--definition term--></dt><dd> <!--definition
description--></dd>
</dl>
Nested Lists
Lists can contain other lists The browser will automatically the
bullets or numbering style based on the level of nesting
Nested Lists (cont.)
<ul><li>Movie Channels
<ul><li>HBO</li><li>Show Time</li>
</ul></li><li>Learning Channels
<ul><li>Discovery Channel</li><li>History Channel</li>
</ul></li>
</ul>
Linking
One of the best features of HTML is our ability to link to other pages
You can link to another page in your web site, an outside url, another part of the page you are on or an email address.
Use the <a> tag or anchor tag to create a link.
Inter document linking
You can link to a page within your web site.
You should try to list the entire path to that file
<a href = “/default.htm”>Home</a>
External Link
You can create a link to another web page outside of your website
Consider using the target attribute to open up a new window
<a href=“http:www.adobe.com” target = “_blank”>Download latest version of Adobe Reader</a>
Email link
You can create an email link to open the users default email program and specify the email addres it is to be sent to.
<a href= “mailto:[email protected]?Subject=Site Feedback” title=“Email Web Help”>Web Help</a>
Intra-document links
You can create a bookmark on a page using a named anchor
The spot on the page you want to set as a bookmark uses the name attribute with no href.
The link you want to create that makes the user jump to a named anchor uses the href.
Intra-document links (cont.)
<a href=“#movie”>Movie Channels</a>
<a name=“movie”>Available Movie Channels Through Cable</a><p>We offer several movie channels including HBO, Show Time and Stars</p>
GIF Images
Graphic Interlaced Format Used for buttons, logo’s, drawings
and non-photographic images Download quickly Limited to 256 colors Created in graphic design programs
such as Photoshop, Paint Pro or Fireworks
GIF Variations
Interlaced – gif will come into focus gradually while the rest of the page loads
Transparent – page background can show through transparent parts of the image so you can have curved edges or other shapes
Animated – images saved in a single file that allow for simple animated images.
JPG Images
Joint Photographic Experts Group Used for photographic images Usually a bit bigger in size than gif
images and may take longer to load
Image Tag
<img /> - does not require a closing tag Src attribute defines the path to where
the image is stored. Width and height – you can define the
width and height of an image so the browser does not have to determine the dimensions of the image
<img src=“images/mypic.jpg” width=“120” height=“200” />
Alternative Text
Description of the image or indication of the purpose of the image
Displayed if users shut off images in their browser
Screen readers read the alternative text
Screen tip on mouseover
Image Border
You can use the border attribute to create or remove a border on an image.
Set the border thickness in pixels:border = “1”border = “0” – no border
Aligning Text
The <img> tag embeds the image in the HTML document.
Text will appear above or below the image
Use align attribute to align text the left, right, top or middle of the image.
Image as a Hyperlink
You can make an image a hyperlink by wrapping an <a> around the <img> tag
<a href=“default.htm”><img src=“images/logo.gif” /></a>
Image Map
You can use an image map to make part of an image linkable – may be used when displaying a map and you can click on different states to display different pieces of information.
Ismap – server side processing of clicking on a map.
Usemap – client side processing of clicking on a map.
http://www.image-maps.com/
Usemap Example
<a href=“processmap.asp”><img src=“images/map2.gif” ismap usemap=“#map2”>
</a><map name=“map2”>
<area coords = “0,0,49,49” href=“Iowa.html”><area coords = “50,0,99,49“ href=“Illinois.html”>
</map>
Attributes
Tags such as <body>, <div> or <table> can have attributes set within the tag for a background image, background color or link state
Bgcolor- set this to give that element a background color
Background – set this attribute to the url of an image to give it a background image.
Attributes (cont.)
In the <body> tag you can set the state of links
Link=“orange” - sets any link in the body of that page to orange before it is visited
Vlink=“red” - once a link is visited, it sets the color to red.
Alink=“green” - when you click on a link to make it actve the color will be green.
These attributes are deprecated in HTML 4.0 because they should now be set with styles.
