HTML. Goals How to use the Komodo editor HTML coding and testing Basic HTML tags List and Images Tables and Links At least 2 pages and navigation

HTML

Goals

• How to use the Komodo editor• HTML coding and testing

• Basic HTML tags• List and Images• Tables and Links• At least 2 pages and navigation

• http://www.w3schools.com

http://www.w3schools.com/

Basic Syntax of HTML

• <> denotes tags• First tag: <html>• Most tags require and opening and closing

tags to stop– <\html> indicates the closing tag

Start and End of HTML

• <html> </html> Start and end of HTML• <head> </head> Start and end of head

section• <body> </body> Start and end of body• <title> </title> Start and end of title of

your page

HTML Tag Rules

• Whitespace are ignored

• Beware: HTML does no checking for syntax errors – it interprets what it can and ignores the rest. You will need to be the error checker for yourself

Editing Content

• For example:– <b> indicates the following text will be bold– Example:

<b> Bold me! <\b> but not me!

The result of the above will be:

Bold me! but not me!

Basic Structure of HTML Page

<html><head>

<title> The Title </title></head><body>

<b>Test Page</b> with text<body>

</html>

Syntax

• Headers<h1> Header 1 </h1><h2> Header 2 </h2><h3> Header 3 </h3><h4> Header 3 </h4><h5> Header 3 </h5><h6> Header 3 </h6>

• Paragraphs<p> Paragraph </p>

More Syntax

• Next Line<br>

• Changing text<b> bold </b><i> italics </i><u> underline </u>

• Comment– 

More Syntax!

• space• <marquee> Text scrolling </marquee>• <font color="blue"> Font text </font>– Options: color, face, size

• <center> Centered Text </center>

• <body bgcolor=“color">

More Syntax!

• Horizontal Line– <hr>

• Changing Font– <font> Change the font of this text </font>– Changing font has many different attributes– Other tags also have attributes

Attributes of Tags

• <font color=“blue”> Blue text </font>• <font size=“1”> small text </font>• <font face=“Arial”> Arial text </font>

• You can put all attributes into one tag:– <font color=“blue” size=“1” face=“Arial”>

Changed text font</font>

Deprecated Tags

• <b>, <u>, <i> have been deprecated• HTML wasn’t meant to be about styling– This is why we have CSS

• Instead use <strong> and <em>

• For <font>, we have to use <span> with CSS

Deprecated Tags cont.

• “In HTML 4, several tags and attributes were used to style documents. These tags are not supported in newer versions of HTML.”

• “Avoid using the elements: <font>, <center>, and <strike>, and the attributes: color and bgcolor.”

*From http://www.w3schools.com/html/html_css.asphttp://www.tutorialspoint.com/html/html_deprecated_tags.htm

http://www.w3schools.com/html/html_css.asp

http://www.tutorialspoint.com/html/html_deprecated_tags.htm

Making an Image Your Background

• For color:<body bgcolor=“color">

• For background image:<body background="bgimage.jpg">

Linking Web Pages

• <a href=“url_here”> Link Text </a>• The URL can be a page you created or an

external link (MUST HAVE HTTP)

• <a href=“aboutme.html”> About Me </a>• <a href =“http://www.mtsu.edu”> MTSU </a>

MTSU

http://www.mtsu.edu/

Useful Attributes for Links

• Target=“_blank” – opens the link in a new window

• Title=“” – the alt text of the link

• Can anchor pages:– <a name=“myanchor"></a> – Click <a href="#myanchor">here</a> to go to the

anchor.

Lists

• Two types of lists– Ordered:

1. First entry2. Second entry3. Third entry

– Unordered• Entry• Entry• Entry

Ordered Lists

<ol><li> First Entry </li><li> Second Entry </li>

<li> Third Entry </li></ol>

Order List Attributes

• Compact – less space between lines and indentation– <ol compact="compact">

• Start – specifies the start number– <ol start="50">

• Type – specifies the type of order (1, A, a, I, i)– <ol type="I">

Unordered Lists

<ul><li> Entry </li><li> Entry </li>

<li> Entry </li></ul>

Unordered Lists Attributes

• Compact– <ul compact="compact">

• Type (disc, square, circle)– <ul type="square">

Lists Within Lists

1. First Entry– Sub Entry– Sub Entry

2. Second Entry– Sub Entry

3. Third Entry

<ol> <li> First Entry </li> <ul> <li> Sub Entry </li> <li> Sub Entry </li> </ul> <li> Second Entry </li> <ul> <li> Sub Entry </li> </ul> <li> Third Entry </li></ol>

Inserting Images

• Two ways to insert:– Put the Internet link– Download the image, link it

– <img src=“www.some_site.com/image.jpg” />– <img src=“image.jpg” />

Making a Picture a Link

• <a href=“url”> <img src=“image.jpg” /> </a>

Attributes of Inserting Images

• Alt – the alternative text of the picturethis shows up when you scroll over an

image• Width – specifies the width of the image• Height – specifies the height of the image• Align – specifies the alignment (top, bottom,

middle, left, right) (Going to use CSS for this)• <img src=“image.jpg" alt=“My Picture"

width="304" height="228" />

What is the Difference?

• Saving: have to download the image– Include the location and image name.

• Link: You just include the URL– Taking up the resources of whatever site you got

the link from

Tables

• <table> </table> : Start and end of the table• <tr> </tr> : Start and end of a row• <th> </th> : Start and end of a header cell• <td> </td> : Start and end of a table data cell

Tables

<table><tr>

<th> Header 1 </th><th> Header 2 </th>

</tr><tr>

<td> Data 1 </td> <td> Data 2 </td> </tr></table>

Header 1 Header 2Data 1 Data 2

Attributes of Tables

• Table: align, bgcolor, border, cell padding, cell spacing, frame, rules, summary, width

• th and td: abbr, align, axis, bgcolor, char, charoff, colspan, height, nowrap, rowspan, scope, valign, width

• tr: align, bgcolor, charoff, valign

The <span> tag

• Instead of <center> : <p style=“text-align:center;”> Centered Text </p>

• Or <h1 style=“text-align:center;”> Centered Header </h1>

The <span> tag cont.

• Instead of <font color=“blue>:<span style=“color:red;”> Text </span>

• For multiple attributes:<span style="font-family:arial;color:red;font-size:20px;"> Text </span>

• Can also be applied to other tags:<p style="font-family:arial;color:red;font-size:20px;">

For Background Color• <body style="background-color:yellow;">• Background Image: <body style="background-

image:img.jpg;">

• Background of a Header or other tag:

<h2 style="background-color:red;">Heading 2</h2>

<p style="background-color:green;">This is a paragraph.</p>

Extra Stuff

• Marquee - http://www.quackit.com/html/codes/html_marquee_code.cfm

• Embed Youtube videos:– Go to a youtube video:

http://www.youtube.com/watch?v=jofNR_WkoCE– Click Share, next to About– Click Embed, next to Share this video– Copy the text and paste into your website

http://www.quackit.com/html/codes/html_marquee_code.cfm

http://www.quackit.com/html/codes/html_marquee_code.cfm

http://www.youtube.com/watch?v=jofNR_WkoCE

Changing your Webpage Layout

• Div: http://www.w3schools.com/html/html_layout.asp

• Div stands for division:– Menus and Sidebars and more

http://www.w3schools.com/html/html_layout.asp

http://www.w3schools.com/html/html_layout.asp

Using Divs

• You can divide up your page to create banners, sidebars, main content, footers, headers, etc.

• http://www.mtsu.edu/• https://cs.mtsu.edu/~mw3n/• http://w3schools.com/css/tryit.asp?filename=

trycss_float6



https://cs.mtsu.edu/~mw3n/

https://cs.mtsu.edu/~mw3n/

http://w3schools.com/css/tryit.asp?filename=trycss_float6

http://w3schools.com/css/tryit.asp?filename=trycss_float6

Styles to use with Div

• Width – specifies the width of the division• Height – specifies the height of the division• Color – color of the text inside the division• Background-color• Background-image• Display• Float• Text-Align

Documents

HTML. Goals How to use the Komodo editor HTML coding and testing Basic HTML tags List and Images Tables and Links At least 2 pages and navigation