Post on 31-Mar-2015
HTML Basics
1450 Technology SeminarCopyright 2003, Matthew Hottell
What is HTML?
What is HTML?
Hypertext Markup Language
What is HTML?
Hypertext Markup Language Hypertext:
Allows for non-linear linking to other documents
What is HTML?
Hypertext Markup Language Hypertext:
Allows for non-linear linking to other documents
Markup Language: Content to be displayed is “marked
up” or tagged to tell the browser how to display it.
History of HTML
History of HTML
HTML was created in 1991 by Tim Berners-Lee at CERN in Switzerland
History of HTML
HTML was created in 1991 by Tim Berners-Lee at CERN in Switzerland.
It was designed to allow scientists to display and share their research.
HTML Basics
HTML is primarily composed of two types of markup:
Elements or tags <html></html>
Attributes that modify an element
Elements
Elements are the fundamental building blocks of HTML.
They are the tags that tell the browser what the enclosed text is.
<title>My first HTML page</title>The title element tells the browser
that this is the title of the page. Elements must be terminated
Elements
General format of an element:
<startTag>Target content</endTag>
HTML is NOT case sensitive…
Common Elements
<html></html> All markup must be placed within HTML
tags
<head></head> Contains information about the page as
well as other non-display content<body></body> All display content should go inside these tags
HTML Skeleton
<html><head><title>My first HTML Page!</title></head><body>I Love HTML!</body></html>
Common Elements
<p></p> Tells the browser that the enclosed
text should be set off in a paragraph.
<h1></h1> This is a heading – the number can
range from 1 to 7 for different sizes
Text Display Elements
<b></b> or <strong></strong> Bolds the tagged text<em></em> or <i></i> Italicizes the tagged text<pre></pre> Preserves white space and breaks
and stands for “preformatted”
Common Tags
<br> Inserts a line break This is an empty tag – it does not
have a closing tag.<hr> Inserts a horizontal rule (line) This is another empty tag
HTML Comments
An HTML Comment which is NOT displayed in the page is done like this:
<!-- This is a comment -->
Attributes
Sometimes we need more information for an element in order to control the way the content displays
We provide this information with attributes stated within the element start tag
Attributes
The generic way of using an attribute looks like this:
<elementName attribute=“value”>Target content</elementName>
Single or double quotes may be used to hold attribute values
Attribute examples
<p align=“center”>This will appear centered</p>
<img src=“mypicture.jpg”> This tag inserts the image
“mypicture.jpg” into the page. Make sure to use the right path!
Hyperlinks
Hyperlinks are created using the <a> tag, which stands for “anchor”. The format looks like this:
<a href=“uri_to_document”>Content to click on for the link</a>
The uri can also be a mailto: link
Tables
Tables require three different tags:<table></table> Defines the table itself<tr></tr> Defines a table row<td></td> Defines a table cell (table data)
TablesExample table:
<table><tr><td>Column One, row one</td>
<td>Column Two, row one</td></tr><tr><td>Column One, row two</td>
<td>Column Two, row two</td></tr></table>
Lists
Two main types: Unordered list
<ul></ul> Ordered List
<ol></ol>
List items are indicated by <li></li>
Font
You can modify more exactly the way text looks by using the <font></font> tag:
<font color=“red” size=“3” face=“Garamond”>
This is red, size 3, and in Garamond!</font>
Entities
Some content characters may not show up properly if simply placed inside tags.
How would you mark up the following:
Is 3<4 ?
Entities
In order to display these characters, we use entities to represent them:
Character: Entity:< <> >& &[space]