How to Write a Web Page By Mimi

How to Write a Web Page By Mimi Opkins

What We’ll Cover Today u. Basic HTML Tags u. How to Make a Simple Page

What Is HTML u. Hypertext Markup Language u. Instructions to the Web Browser u. Like proofreading instructions u. Made up of “tags”

Anatomy of a Tag u. Start Tag: u<TAGNAME ATTRIBUTE=value> u. End Tag: u</TAGNAME> OR u. Tag: u<TAGNAME ATTRIBUTE=value>

What You Need to Know About Tags u. NOT case-sensitive u. Doesn’t matter where you put them on a line u. Don’t have to be on the same line as the text u. Not all tags have ending tags u. Browsers will ignore invalid tags

Basic HTML Tags u. Titles u. Headings u. Line Spacing u. Graphics u. Fonts u. Links u. Lists u. Tables

HTML Tag u. Lets the browser know that this is an HTML document u. Must start and every web page u<HTML> u</HTML>

HEAD Tag u. First part of every Web Page u. Defines the heading section u<HEAD> u</HEAD>

TITLE Tag u. Displays information on the top line of your browser u<TITLE>Title Line</TITLE>

TITLE Example <HTML> <HEAD> <TITLE>My First Web Page</TITLE> </HEAD>

TITLE Example

BODY Tag u. Defines the main section of your web page u<BODY BGCOLOR=color name BACKGROUND=picturename> u</BODY>

BODY Example u. BACKGROUND specifies a background picture <BODY BACKGROUND=lionimg. gif> u. BGCOLOR specifies a background color <BODY BGCOLOR=cyan>

BODY Background Example

BODY BGCOLOR Example

Heading Tag u. Used to display headings u 6 different levels u<H 1> </H 1> u<H 2> </H 2> u<H 3> </H 3> u<H 4> </H 4> u<H 5> </H 5> u<H 6> </H 6>

Heading Example <H 1>Heading <H 2>Heading <H 3>Heading <H 4>Heading <H 5>Heading <H 6>Heading Level Level 1</H 1> 2</H 2> 3</H 3> 4</H 4> 5</H 5> 6</H 6>

Heading Example

Adding Text u. Just type in the information you want u. Browser will format it for you based on screen width and other HTML tags

Adding Text Example <HTML> <HEAD> <TITLE>My First Web Page</TITLE> </HEAD> <BODY> This is the text of my first web page. </BODY> </HTML>

Adding Text Example

Line Spacing Tags u. Break Tag - starts a new line u<BR> u. Paragraph Tag - starts a new line and inserts a blank line u<P>

Line Spacing Tags (con’t. ) u. Center Tag - centers the following text or picture u<CENTER> </CENTER> u. Horizontal Rule - draws a straight line across the screen u<HR WIDTH=xx%>

Line Spacing Example <BODY> This is the first paragraph of my web page. <BR>This text will start on a new line <P>This will start on a new line with a blank space. <CENTER>This text is centered on the page </CENTER>  <HR WIDTH=50%>

Line Spacing Example

Let’s Put It Together (so far) <html> <head> <title>My First Web Page</title> </head> <body> <h 1>Welcome to My Web Page</h 1> This is my very own web page. Just learning how so I'm experimenting with different tags. <BR>This text will start on a new line <h 2>This is the next section of my first web page</h 2> <P>This will start on a new line with a blank space. <CENTER>This text is centered on the page <h 3>So is this heading</h 3>  <hr> </CENTER> </body> </html>

Let’s Put It Together (so far)

IMG Tag u. Add pictures to a web page u<IMG SRC=name of the picture ALIGN=alignment option WIDTH=width HEIGHT=height ALT=alternate text>

IMG Tag (con’t. ) u. Alignment controls where picture is placed in relationship to the text u. LEFT, RIGHT, TOP, MIDDLE, BOTTOM u. WIDTH and HEIGHT control the size of the picture in pixels

Image Example

Image Example (con’t. )

FONT Tag u<FONT SIZE=size COLOR=color> u</FONT>

FONT Tag (con’t. ) u. SIZE Ranges from 1 to 7 u. COLOR changes the color of the text between the <FONT> and </FONT> tags

Font Example <html> <head><title>My First Web Page</title></head> <body> This is normal size text. It is font size 3. <font size=7>This is font size 7</font> <font size=6>This is font size 6</font> <font size=5>This is font size 5</font> <font size=4>This is font size 4</font> <font size=3>This is font size 3</font> <font size=2>This is font size 2</font> <font size=1>This is font size 1</font> <font color=red>This is red text</font> <font color=blue>This is blue text</font> This is normal color text. It is black. </body> </html>

Font Example

Other Font Related Tags u. Bold u<B> </B> u. Underline u<U> </U> u. Italic u<I> </I>

More Font Examples <html> <head> <title>My First Web Page</title> </head> <body> This is normal size text. <b>This is bold text. </b> <i>This text is in italics. </i> <u>This text is underlined. </u> You can combine these tags also. <b><i>This is bold, italic text. </i></b> </body> </html>

More Font Examples

A Word About Color u. Color is really expressed in three parts u. RED GREEN BLUE u. COLOR=#RRGGBB u. Cyan is COLOR=#00 FFFF u. Yellow is COLOR=#FFFF 00 u. Black is COLOR=#000000 u. White is COLOR=#FFFFFF

More About Color u. Some browsers will accept color names u. Common color names are: u. RED u. GREEN u. BLUE u. CYAN u. YELLOW

Anchor Tag (How to Make Links) u<A HREF=web page address> link description u</A>

Anchor Example <A HREF=“http: //www. csulb. edu”> Cal State University Long Beach</A> <A HREF=“mailto: mopkins@csulb. edu”> Teacher Extraordinaire</A>

Anchor Example <html> <head> <title>My First Web Page</title> </head> <body> <h 2>How to Add a Link to a Web Page</h 2> <p> To add a link to a web page you use the anchor < A> tag. This takes three parts: <ol> <li>The < A HREF="web page name"> is the actually place where you want the link to go <li>Next you put the title of the web page <li>Finally, you end the link with the < /A> tag. </ol> <p> For example: <b><font color=red>

Anchor Example (con’t. ) < A HREF=http: //www. experian. com> Experian Information Solutions Home Page < /A> </font></b> is a link to the Experian Information Solutions page. <p> It will look like this on the web page: <a href=http: //www. experian. com>Experian Information Solutions</a> <p> You can also set up a link to automatically open up the email program. It goes like this: <b><font color=red> < A HREF=mailto: email address> email recipient< /A> </font></b> <p>It will look like this on the web page: <A HREF=mailto: mimi. opkins@experian. com>Employee Extraodinaire</a> </body> </html>

Anchor Example

How Do I View the HTML u. Internet Explorer: u View…Source u. Mozilla: u View…Page Source

How Do I Test My Page u. Internet Explorer: u File…Open…Browse u. Mozilla u File…Open File

Lists u. Unordered List u. Simple List u. Ordered List u. Definition List

Unordered List Tag u. Used when the items in a list can be displayed in any order u. Items are displayed following a “bullet” character

Unordered List Tag (con’t. ) u. All list items must be enclosed between unordered list tags u<UL> u</UL> u. List items are identified by the list item tags u<LI> u</LI>

Unordered List Example <UL> <LI>Milk</LI> <LI>Bread</LI> <LI>Eggs</LI> </UL>

Unordered List Example

Changing the Bullet u. Change the bullet type in the <UL TYPE=bullet-type> tag u<UL TYPE=DISC> displays a solid disc u<UL TYPE=CIRCLE> displays a circle u<UL TYPE=SQUARE> display a square

Bullet Type Example <UL TYPE=DISC> <LI>List item 1 disc</LI> <LI>List item 2 disc</LI> </UL> <UL TYPE=CIRCLE> <LI>List item 1 circle</LI> <LI>List item 2 circle</LI> </UL> <UL TYPE=SQUARE> <LI>List item 1 square</LI> <LI>List item 2 square</LI> </UL>

Bullet Type Example

Simple List Tag u. Another type of unordered list u. Browser may not display it differently than an ordered list u. All list items must be enclosed between simple list tags u<SL> u</SL>

Simple List Example <SL> <LI>Milk</LI> <LI>Bread</LI> <LI>Eggs</LI> </SL>

Simple List Example

Ordered List Tag u. Numbered Lists u. Used when order is important u. All list items must be enclosed between ordered list tags u<OL> u</OL>

Ordered List Example <OL> <LI>Drop of the kids</LI> <LI>Pick up the dry cleaning</LI> <LI>Go to the market</LI> </OL>

Ordered List Example

Changing the Numbering Scheme u. Change the numbering type in the <OL TYPE=number-type> tag u<OL TYPE=“ 1”> (1, 2, 3) u<OL TYPE=“A”> (A, B, C) u<OL TYPE=“a”> (a, b, c) u<OL TYPE=“I”> (I, III) u<OL TYPE=“i”> (i, iii)

Number Type Example <OL TYPE="1"> <LI>List item 1 type 1</LI> <LI>List item 2 type 1</LI> <LI>List item 3 type 1</LI> </OL> <OL TYPE="A"> <LI>List item 1 type A</LI> <LI>List item 2 type A</LI> <LI>List item 3 type A</LI> </OL>

Number Type Example <OL TYPE="a"> <LI>List item 1 type a</LI> <LI>List item 2 type a</LI> <LI>List item 3 type a</LI> </OL> <OL TYPE="I"> <LI>List item 1 type I</LI> <LI>List item 2 type I</LI> <LI>List item 3 type I</LI> </OL> <OL TYPE="i"> <LI>List item 1 type i</LI> <LI>List item 2 type i</LI> <LI>List item 3 type i</LI> </OL>

Number Type Example

Definition List Tag u. Used to format a glossary or dictionary type of structure u. All list items must be enclosed between definition list tags u<DL> u</DL> u. Terms are identified by the <DT> tag u. Definitions are defined by the <DD> tag

Definition List Example <DL> <DT>HTML <DD>Hypertext Markup Language <DT>World Wide Web <DD>One of the services available on the Internet </DL>

Definition List Example

Nested Lists u. You can embed or “nest” lists within lists u. Just about any nested list combination imaginable

Nested Lists Example <OL> <LI>Go to the market and buy: </LI> <UL> <LI>Milk</LI> <LI>Eggs</LI> </UL> <LI>Go to the cleaners and pick up: </LI> <UL> <LI>Shirts</LI> <LI>Dresses</LI> </UL> <LI>Remember: </LI> <DL> <DT>Survive <DD>My motto of the day </DL> </OL>

Nested Lists Example

Formatting Within Lists u. Decreasing Space u. Use the COMPACT attribute in the <UL>, <SL>, <OL> or <DL> tag uexample: <UL COMPACT> u. Increasing Space u. Put the <P> tag after each </LI> tag

Tables u. Intended for display of columnar data u. Can be used to align data on the screen u. Not just for text - images, blank space, form fields and other tables

How Tables are Organized u. The fundamental building blocks of tables are called cells u. Cells contain a data element of the table or a heading for a column of data u. Related cells are grouped into rows u. Rows are grouped together to make up a table

TABLE Tag u. All elements in a table are enclosed between the table tags u<TABLE> u</TABLE>

Table Row Tag u. Rows are defined with the Table Row tags u<TR> u</TR> u. You can place as many <TR> and </TR> tag pairs inside a table as you want u. Each pair counts for one row

Creating a Table Cell u. Two types of table cells: u. Table Headers u. Data Cells

Table Header Tag u. Table headers are defined with the table header tags u<TH> u</TH> u. Table Header cells are automatically centered and boldface u. Usually the first row of a table

Table Data Tag u. Data cells are defined with the table data tags u<TD> u</TD> u. Data cells are left justified u. Formatted with the usual tags

Table Example <TABLE> <TR> <TH>Table Header 1</TH> <TH>Table Header 2</TH> </TR> <TD>Data Element 1</TD> <TD>Data Element 2</TD> </TR> </TABLE>

Table Example

Table Alignment u. Vertical Alignment u. Horizontal Alignment u. Entire Table u. Within a Row u. Within a Cell

Vertical Alignment u. Refers to alignment between the top and bottom of a cell u. Set the VALIGN attribute to u. TOP u. MIDDLE u. BOTTOM uexample: <TD VALIGN=TOP>

Horizontal Alignment u. Refers to alignment of an element across the width of the cell or of a table across a page u. Set the ALIGN attribute to u. LEFT u. CENTER u. RIGHT uexample: <TD VALIGN=RIGHT>

Aligning the Entire Table u. Set ALIGN=LEFT or ALGIN=RIGHT to float the table in the left or right margin <TABLE ALIGN=LEFT> u. Set ALIGN=CENTER to center the table in the browser window <TABLE ALIGN=CENTER> u. Enclose the table in <CENTER></CENTER> tags

Aligning a Row u. Use the VALIGN and ALIGN attributes of the <TR> tag to make the alignment the same for every cell in a given row u<TR VALIGN=TOP> u. Any alignment specified in the <TR> tag will override all defaults

Aligning a Cell u. Use the VALIGN and ALIGN attributes in the <TH> or <TD> tags u<TD ALIGN=RIGHT> u. Overrides any default alignments and any alignments specified in a <TR> tag

Other TABLE Attributes u. Captions u. Table Width u. Borders u. Spacing within and between cells u. How many rows or columns a cell should occupy

Adding a Caption u. Enclose the caption text between the caption tags u<CAPTION> u</CAPTION> u. Appears centered over the table u. Use ALIGN=BOTTOM attribute to place the caption below the table <CAPTION ALIGN=BOTTOM>

Setting the Table Width u. Use the WIDTH attribute u. Specify the table with in % of the browser window u<TABLE WIDTH=50%> u. Specify the table width in pixels u<TABLE WIDTH=600>

Adding a Border u. Use the BORDER attribute u. Set the BORDER to the number of pixels wide u<TABLE BORDER=3> u. You can specify no border u<TABLE BORDER=0>

Cell Spacing u. Use the CELLPADDING attribute to specify spacing in pixels within a cell u<TABLE CELLPADDING=6> u. Use the CELLSPACING attribute to specify spacing in pixels between cells u<TABLE CELLSPACING=3>

Spanning Multiple Rows or Columns u. Use the COLSPAN attribute of a <TH> or <TD> tag to make the cell occupy multiple columns u<TH COLSPAN=2> u. Use the ROWSPAN attribute of a <TH> or <TD> tag to make the cell occupy multiple rows u<TD ROWSPAN=3>

Complex Table Example <TABLE WIDTH=50% BORDER=5 CELLSPACING=3 CELLPADDING=10> <CAPTION>This is a complex table</CAPTION> <TR ALIGN=RIGHT> <TH COLSPAN=2>Table Heading</TH> </TR> <TD ROWSPAN=3>Cell Spaning three rows</TD> <TD>Data Row 1 cell 2</TD> </TR>

Complex Table Example <TR> <TD>Data Row 2</TD> </TR> <TD>Data Row 3</TD> </TR> </TABLE>

Complex Table Example