HTML –1

Web Sources

www.w3schools.com

www.htmlhelp.com

www.goodpractices.com/

www.htmlgoodies.com

 

What is an HTML File?

 

·        HTML documents are text files made up of HTML elements.

·        HTML elements are defined using HTML tags.

 

HTML Tags

 

Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<Title>Home Page for Lawrence M. Brown</Title>
</HEAD>
<BODY BGCOLOR="WHITE">
<H1 ALIGN="CENTER">Home Page for Lawrence M. Brown</H1>
<HR>
<IMG SRC="images/nswc.gif" WIDTH=300 HEIGHT=117
HSPACE=10 VSPACE=5 ALIGN="LEFT" ALT="NSWC Logo">
Senior Network Engineer<BR>
<A HREF="http://www.dt.navy.mil/">
Naval Surface Warfare Center</A><BR>
9500 MacArthur Boulevard<BR>
West Bethesda, Maryland, MD 20817-5700<BR>
<I>email:</I> <A HREF="mailto:brown@corewebprogramming.com">
brown@corewebprogramming.com</A><BR>
<I>Phone:</I> (301) 277-4648<BR CLEAR="ALL">
<P>
This is my personal home page. For more specific
programming-related resources pages, please see:
<!-- Rest of Sample Page Deleted -->
</BODY>
</HTML>
 
 
 

 

WYSIWYG Editors

·       Microsoft FrontPage

·       Claris Home Page

·       Adobe PageMill

·       Macromedia DreamWeaver

 

Tag Types

Basic HTML Tags

Tag

Description

<html>

Defines an HTML document

<body>

Defines the document's body

<h1> to <h6>

Defines header 1 to header 6

<p>

Defines a paragraph

<br>

Inserts a single line break

<hr>

Defines a horizontal rule

<!-->

Defines a comment

Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.

<html>
<body>
 
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
 
<p>Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.</p>
 
</body>
</html>

 

HTML automatically adds an extra blank line before and after a heading.

 

 

Paragraphs

Paragraphs are defined with the <p> tag.

<html>
<body>
 
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser 
ignores it.
</p>
 
<p>
This paragraph
contains      a lot of spaces
in the source     code,
but the    browser 
ignores it.
</p>
 
<p>
The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>

HTML automatically adds an extra blank line before and after a paragraph.

 

 

 

Line Breaks

The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it.

HTML Code

Appearance

 
<html>
<body>
 
<p>
To break<br>lines<br>in a<br>paragraph,<br>use the br tag.
</p>
 
</body>
</html>

To break
lines
in a
paragraph,
use the br tag.

The <br> tag is an empty tag. It has no closing tag.

 

Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.

<!-- This is a comment -->

Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

 

Example 2

HTML Document Template

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE>Title</TITLE>
</HEAD>

<BODY>
<H1>Main Heading</H1>

<!-- Rest of page goes here -->

</BODY>
</HTML>

   

 

Headings Again

Example 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<HEAD>
  <TITLE>Document Headings</TITLE>
</HEAD>

<BODY>
Samples of the six heading types:
<H1>Level-1 (H1)</H1>
<H2 ALIGN="CENTER">Level-2 (H2)</H2>
<H3><U>Level-3 (H3)</U></H3>
<H4 ALIGN="RIGHT">Level-4 (H4)</H4>
<H5>Level-5 (H5)</H5>
<H6>Level-6 (H6)</H6>
</BODY>

</HTML>


 
 

 

HTML Links

HTML uses a hyperlink to link to another document on the Web.

HTML

Description

<html>

<body>

 

<p>

<a href="lastfile.html">

This text</a> is a link to a page on

this Web site.

</p>

 

<p>

<a href="http://www.google.com/">

This text</a> is a link to a page on

the World Wide Web.

</p>

 

</body>

</html>

This text is a link to a page on this Web site.

This text is a link to a page on the World Wide Web.

 

 

An image as a link

HTML

Description

<html>

<body>

<p>

You can also use an image as a link:

<a href="lastfile.htm">

<img border="0" src="buttonnext.gif" width="65" height="38">

</a>

</p>

 

</body>

</html>

You can also use an image as a link:

 

The Anchor Tag and the Href Attribute

HTML uses the <a> (anchor) tag to create a link to another document.

·        An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.

·        The syntax of creating an anchor: 

<a href="url">Text to be displayed</a>

·        The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

·        This anchor defines a link to W3Schools:

<a href="http://www.pace.edu/">Visit Pace!</a>

·        The line above will look like this in a browser:

Visit Pace!

 

The Target Attribute

·        With the target attribute, you can define where the linked document will be opened.

·        The line below will open the document in a new browser window:

<a href="http://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>

TARGET="_self"

This target causes the link to always load in the same window the anchor was clicked in.

 

 

Numbered, Bulleted, and Indented Lists

Simple List

 

<HTML>
<HEAD>
  <TITLE>Numbered List</TITLE>
</HEAD>

<BODY>
<H1>Numbered List</H1>

A sample list:
<OL>
  <LI>List Item One
  <LI>List Item Two
  <LI>List Item Three
</OL>

</BODY>
</HTML>
 

 

 

Nested Ordered List

 

<HTML>
<HEAD>
  <TITLE>Nested Ordered Lists</TITLE>
</HEAD>

<BODY>
<H1>Nested Ordered Lists</H1>

<OL TYPE="I">
  <LI>Headings
  <LI>Basic Text Sections
  <LI>Lists
      <OL TYPE="A">
        <LI>Ordered
            <OL TYPE="1">
              <LI>The OL tag
                  <OL TYPE="a">
                    <LI>TYPE
                    <LI>START
                    <LI>COMPACT
                  </OL>
              <LI>The LI tag
            </OL>
        <LI>Unordered
            <OL TYPE="1">
              <LI>The UL tag
              <LI>The LI tag
            </OL>
        <LI>Definition
            <OL TYPE="1">
              <LI>The DL tag
              <LI>The DT tag
              <LI>The DD tag
            </OL>
      </OL>
  <LI>Miscellaneous
</OL>

</BODY>
</HTML>

 

Bulleted Lists

Simple Bullet

 

<HTML>
<HEAD>
  <TITLE>Bulleted List</TITLE>
</HEAD>

<BODY>
<H1>Bulleted List</H1>

A sample list:
<UL>
  <LI>List Item One
  <LI>List Item Two
  <LI>List Item Three
</UL>

</BODY>
</HTML>
 
 

 

Tables

Simple Table

 

<HTML>
<HEAD>
  <TITLE>Simple Table</TITLE>
</HEAD>

<BODY>
<H1>Simple Table</H1>

<TABLE BORDER=1>
  <CAPTION>Table Caption</CAPTION>
  <TR><TH>Heading1</TH>      <TH>Heading2</TH></TR>
  <TR><TD>Row1 Col1 Data</TD><TD>Row1 Col2 Data</TD></TR>
  <TR><TD>Row2 Col1 Data</TD><TD>Row2 Col2 Data</TD></TR>
  <TR><TD>Row3 Col1 Data</TD><TD>Row3 Col2 Data</TD></TR>
</TABLE>

</BODY>
</HTML>
 

 

Tic-Tac-Toe

 

<HTML>
<HEAD>
  <TITLE>2000 World Championship</TITLE>
</HEAD>

<BODY>
<H2 ALIGN="CENTER">2000 World Championship</H2>
Final result in the 2000 world tic-tac-toe championship.
Deep Green is "X", Barry Kasparov is "O".
<TABLE ALIGN="CENTER" BORDER=1 FRAME="VOID">
  <TR><TH>X<TH>O<TH>X
  <TR><TH>X<TH>O<TH>X
  <TR><TH>O<TH>X<TH>O
</TABLE>
</BODY>
 

 

Table Background Color


 

<HTML>
<HEAD>
  <TITLE>WWW Standards</TITLE>
</HEAD>

<BODY BGCOLOR="WHITE">
<H1 ALIGN="CENTER">WWW Standards</H1>

<TABLE BORDER=1 BGCOLOR="#EEEEEE">
  <TR BGCOLOR="BLACK">
    <TH><FONT COLOR="WHITE">Standard</FONT>
    <TH><FONT COLOR="WHITE">Obsolete Version</FONT>
    <TH><FONT COLOR="WHITE">Most Widely Supported
    Version</FONT>
    <TH><FONT COLOR="WHITE">Upcoming Version</FONT>
  <TR><TD>HTML
      <TD>3.2
      <TD>4.0
      <TD>XHTML
  <TR><TD>HTTP
      <TD>1.0
      <TD>1.1
      <TD>1.2
</TABLE>

</BODY>
</HTML>
 

 

Table Column Spans

<HTML>
<HEAD>
  <TITLE>Colspan</TITLE>
</HEAD>

<BODY>
<H1>Colspan</H1>

<TABLE BORDER=1>
  <TR><TH COLSPAN=2>Col 1&2 Heading
      <TH>Col3 Heading
  <TR><TD>Col1 Data
      <TD>Col2 Data
      <TD>Col3 Data
</TABLE>

</BODY>
</HTML>

 

 

Table Row Spans

 

<HTML>
<HEAD>
  <TITLE>Rowspan</TITLE>
</HEAD>

<BODY>
<H1>Rowspan</H1>

<TABLE BORDER=1>
  <TR><TH>Heading1<TH>Heading2
  <TR><TD ROWSPAN=2>Data for Row 1&2, Col1
      <TD>Row1 Col2 Data
  <TR><TD>Row2 Col2 Data
</TABLE>

 

Table Groups

 

<HTML>
<HEAD>
  <TITLE>Table Groups</TITLE>
</HEAD>

<BODY>
<H1>Table Groups</H1>

<TABLE BORDER=1 CELLPADDING=4 RULES="GROUPS">
  <CAPTION>Table Groups
  <THEAD>
    <TR><TH>Table Head<TH>Table Head
  <TBODY>
    <TR><TD>Group 1<TD>Group 1
    <TR><TD>Group 1<TD>Group 1
  <TBODY ALIGN="RIGHT">
    <TR><TD>Group 2<TD>Group 2
    <TR><TD>Group 2<TD>Group 2
  <TFOOT ALIGN="CENTER">
    <TR><TD COLSPAN=2>Footer
</TABLE>

</BODY>
</HTML>

 
 

Text-Level Elements

Physical Character Styles

 

<HTML>
<HEAD>
  <TITLE>Physical Character Styles</TITLE>
</HEAD>

<BODY BGCOLOR="WHITE">
<H1>Physical Character Styles</H1>

<B>Bold</B><BR>
<I>Italic</I><BR>
<TT>Teletype (Monospaced)</TT><BR>
<U>Underlined</U><BR>
Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR>
Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR>
<SMALL>Smaller</SMALL><BR>
<BIG>Bigger</BIG><BR>
<STRIKE>Strike Through</STRIKE><BR>
<B><I>Bold Italic</I></B><BR>
<BIG><TT>Big Monospaced</TT></BIG><BR>
<SMALL><I>Small Italic</I></SMALL><BR>
<FONT COLOR="GRAY">Gray</FONT><BR>
<DEL>Delete</DEL><BR>
<INS>Insert</INS><BR>

</BODY>
</HTML>

 

Logical Character Styles

 

<HTML>
<HEAD>
  <TITLE>Logical Character Styles</TITLE>
</HEAD>

<BODY BGCOLOR="WHITE">
<H1>Logical Character Styles</H1>

<EM>Emphasized</EM><BR>
<STRONG>Strongly Emphasized</STRONG><BR>
<CODE>Code</CODE><BR>
<SAMP>Sample Output</SAMP><BR>
<KBD>Keyboard Text</KBD><BR>
<DFN>Definition</DFN><BR>
<VAR>Variable</VAR><BR>
<CITE>Citation</CITE><BR>
<EM><CODE>Emphasized Code</CODE></EM><BR>
<FONT COLOR="GRAY"><CITE>Gray Citation</CITE></FONT><BR>
<ACRONYM TITLE="Java Development Kit">JDK Acronym</ACRONYM>

</BODY>
</HTML>

 

 

Embedded Images

 

<HTML>
<HEAD>
  <TITLE>Image Alignment</TITLE>
</HEAD>

<BODY>
<H1 ALIGN="CENTER">Image Alignment</H1>

<TABLE BORDER=1>
  <TR><TH>Alignment
      <TH>Result
  <TR><TH><CODE>LEFT</CODE>
      <TD><IMG SRC="rude-pc.gif" ALIGN="LEFT"
               ALT="Rude PC" WIDTH=54 HEIGHT=77>
          This positions the image at the left side,
          with text flowing around it on the right.
  <TR><TH><CODE>RIGHT</CODE>
      <TD><IMG SRC="rude-pc.gif" ALIGN="RIGHT"
               ALT="Rude PC" WIDTH=54 HEIGHT=77>
          This positions the image at the right side,
          with text flowing around it on the left.
  <TR><TH><CODE>TOP</CODE>
      <TD><IMG SRC="rude-pc.gif" ALIGN="TOP"
               ALT="Rude PC" WIDTH=54 HEIGHT=77>
          Here, the image runs into the paragraph
          and the line containing the image is
          aligned with the image top.
  <TR><TH><CODE>BOTTOM</CODE>
      <TD><IMG SRC="rude-pc.gif" ALIGN="BOTTOM"
               ALT="Rude PC" WIDTH=54 HEIGHT=77>
          Here, the image runs into the paragraph
          and the line containing the image is aligned
          with the image bottom.
  <TR><TH><CODE>MIDDLE</CODE>
      <TD><IMG SRC="rude-pc.gif" ALIGN="MIDDLE"
               ALT="Rude PC" WIDTH=54 HEIGHT=77>
          Here, the image runs into the paragraph
          and the line containing the image is aligned
          with the image center.
</TABLE>

</BODY>
</HTML>