Você está na página 1de 27

HTML Basics

1450 Technology Seminar


Copyright 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 Content to be displayed is marked up or tagged to tell the browser how to display it.

Markup Language:

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)

Tables
Example 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> <ol></ol>

Ordered List

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: < &lt; > &gt; & &amp; [space] &nbsp;

Você também pode gostar