HTML Webinar Class

HTML = Hypertext Markup Language
• Displays web pages in a web browser.
• Web browsers use the tags to interpret the
content of the page.
• HTML elements consisting of tags enclosed in
angle brackets (e.g., <html>)
• Tags most commonly come in pairs like <h1>
and </h1>

Before we learn HTML…
• A “website” is a collection of “webpages”
– A webpage is PAGENAME.HTML in an HTML site
– Your home page should always be index.html
• Technically www.yoursitename.com is actually
www.yoursitename.com/index.html
– Webpages are linked together through
“hyperlinks”
• A website is stored on a server.
– A Server has an IP Address (10.231.231.21) and a
DNS translates www.yoursitename.com to that
Address

This is typically at index.html

Color As A Code
http://colorschemedesigner.com

What Does HTML Code Look Like?

What Does HTML Code Look Like?
www.circtech.net

<html>
<head>
<title>Learning Sites</title>
</head>
<body>
The content of the document......
</body>
</html>
The <html> element defines what the
website is loading (whether it be an HTML
site or PHP, etc)
Important: Save your home page as:
index.html

<html>
<head>
</head>
<body>
</body>
</html>
The <head> element must include a title for the
document, and can include scripts, styles, meta
information etc. It lets the browser know what to
load
Scripts (Like JQUERY) are called in the “Head” Tag

<html>
<head>
</head>
<body>
</body>
</html>
The <body> element must includes the content on
the physical page. If you are using scripts, you can
call the placement of the scripts in the body
element.
Here is where most of the “actual coding” takes
place

Basic HTML Body Tags
Formatting Text Tags
o <h1> Creates the largest headline/heading
o <h6> Creates the smallest headline/heading
o <b> or <strong>,Creates bold text / words
o <i> or <em> Creates italic text / words
o <font size="3"></font> Sets size of font, from 1 to 7
o <font color="green"></font> Sets font color, using name or hex value
o <blockquote> Indents text from both sides

Basic HTML Body Tags
Formatting Paragraphs Tags
o <p>Creates a new paragraph
o <p align="left"> Aligns a paragraph to the left (default), right, or center.
o <br> Inserts a line break
o <ol>Creates a numbered list
o <ul>Creates a bulleted list
o <li>Precedes each list item, and adds a number or symbol depending upon
the type of list selected
o <hr /> Inserts a horizontal rule
o <hr size="3" /> Sets size (height) of rule
o <hr width="80%" /> Sets width of rule, in percentage or absolute value
o <hr noshade /> Creates a rule without a shadow

Media HTML Tags
Picture Tags
o <img src="name"> Adds an image
o <img src="name" align="left"> Aligns an image: left, right, center; bottom, top,
middle
o <img src="name" border="1"> Sets size of border around an image
URL Tags
o <a href="URL">NAME OF LINK</a> Creates a hyperlink
o <a href="mailto:EMAIL">NAME OF LINK</a> Creates a mailto link
o <a href="#NAME"></a> Links to that target location from elsewhere in the
document (Defining A Book Mark)
o <a name="NAME"></a> Creates a target location within a document

Basic Table Tags
Formatting Paragraphs Tags
Tables
• <table></table> Creates a table
• <tr></tr> Sets off each row in a table
• <td></td> Sets off each cell in a row
• <th></th> Sets off the table header (a normal cell with bold, centered text)
Table Attributes
• <table border="1"> Sets width of border around table cells
• <table cellspacing="1"> Sets amount of space between table cells
• <table cellpadding="1"> Sets amount of space between a cell’s border and its contents
• <table width="500" or "80%"> Sets width of table, in pixels or as a percentage of document width
• <tr align="left"> or <td align="left"> Sets alignment for cell(s) (left, center, or right)
• <tr valign="top"> or <td valign="top"> Sets vertical alignment for cell(s) (top, middle, or bottom)
• <td colspan="2"> Sets number of columns a cell should span (default=1)
• <td rowspan="4"> Sets number of rows a cell should span (default=1)
• <td nowrap> Prevents the lines within a cell from being broken to fit

Not closing your tags (</TAG>) can ruin your site

Practice Coding
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

A Quick Bit About CSS
• CSS = Cascading Style Sheets
– You can set what “Style” <h1> or <font=1> should
be instead of the default sizes / colors.
– It can also set the layout of the site, backgrounds,
different regions (called <div>’s)
– CSS are basically your “template design”
• There are free webpage templates available.
Google “FREE HTML WEB TEMPLATES”

What’s HTML5
• HTML5 is the latest version of HTML. It
– Removes the need for flash objects
– Uses “responsive design”

You Mentioned Scripts?
• Check out “DynamicDrive.Com”
http://www.dynamicdrive.com/dynamicindex10
/matrixeffect.htm#.UjpxXMbbN8E

1. If you don't have an FTP application, then I recommend that you download
and install the following: http://filezilla-project.org/download.php
2. Upload files to your directory (e.g., lastname_firstname).
3. When you begin to work with the FTP client, you will need to enter the
following credentials:
•REMOVED FOR SLIDESHARE UPLOAD
4. You will need either a text editor (TextEdit on mac or Notepad on PC) or a
tool like Dreamweaver.
Uploading Files

Homework …
• Pick 2 HTML5 tags (experiment with their attributes) and add them
to your practice Web site. OR …
• Find an interesting site that uses HTML5 and modify it for your
needs. {Note: try a search for “HTML5 exercises” and use whatever
interests you. http://goo.gl/MUpiM and http://html5demos.com/
are great resources too!}
• Test and validate your site at http://validator.w3.org/
• Please take good notes because I’d like to spend some time next
week discussing any issues you may have had using HTML5.
• Build a simple page (index.html) that describes what you liked in
the class and what else you would like to learn. Use at least 5
different tags in the body.

Stay In Contact!
• Brian Pichman
– bpichman@evolveproject.org
– Please email me any questions you may have
during the week.

HTML Webinar Class

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to HTML Webinar Class

Similar to HTML Webinar Class (20)

More from Brian Pichman

More from Brian Pichman (20)

Recently uploaded

Recently uploaded (20)

HTML Webinar Class