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.comcommercial.netinternet service provider.orgnonprofit organization.edueducational institution.govUS 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 5 ml5/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

Basic XHTML Document

XHTML  Like HTML but uses DTD to define XML elements 

XHTML  Nested Tags Same as current HTML This statement is itallic  End Tags are required

XHTML  Case sensitive All html tags need to be lower case  Attributes in Quotes All attribute values must be in double quotes

XHTML  Explicit Attribute values All attributes must have a value  Special Characters Put javascript in external files 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 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. 

DTD  HTML 4.01 Transitional  contains all HTML elements and attributes, including presentational and deprecated elements (like font). Framesets are not allowed. 

DTD  HTML 4.01 Frameset  equal to HTML 4.01 Transitional, but allows the use of frameset content. 

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. 

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. 

DTD  XHTML 1.0 Frameset  equal to XHTML 1.0 Transitional, but allows the use of frameset content. 

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). 

 Located in the  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.   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. 

Text  You can separate or distinguish text in different ways - paragraph – puts one blank line after the text - line break – moves text to the next line with no blank line between - allows you to divide your page in sections – puts one blank line after text - allows you to distinguish inline text to apply a style or format.

italic  - physical element that will make the text italic.  - logical element that will make the text italic and will make the text accessible to screen readers.

bold  - physical element that makes text appear bold.  - 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 The article will be featured in the Cedar Rapids Gazette

Other Content Tags  - text is an address and is displayed in italic  - indents the text on the left and right and some browsers display in italic  - 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.)  / /  40/entities/ 40/entities/

Horizontal Rule   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  - makes the text one size bigger than the default.  - makes the text one size smaller than the default.

Unordered Lists  Lists items using a bullet or an image in place of a bullet  item 1 item 2 item 3

Ordered List  Lists items with numbers, letters or roman numerals  item 1 item 2 item 3

Definition List  Used to create a glossary or FAQ page 

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.) Movie Channels HBO Show Time Learning Channels Discovery Channel History Channel

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 address.  Use the 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  Home

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  Download latest version of Adobe Reader

link  You can create an link to open the users default program and specify the addres it is to be sent to.  Web Help

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.) Movie Channels Available Movie Channels Through Cable We offer several movie channels including HBO, Show Time and Stars

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  - 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

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 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 around the tag

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. 

Usemap Example

Attributes  Tags such as, or 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 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.