Basic Concepts on HTML

Submitted by Joy G. Salazar on Fri, 09/26/2014 - 11:36

 What is HTML?

Hypertext Markup Language

  • Hyperlink: 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.

  • A markup language is a set of markup tags

  • HTML documents are described by HTML tags

  • Each HTML tag describes different document content

History of HTML

HTML was created in 1991 by Tim Berners-Lee at CERN in Switzerland

 

HTML Versions

 

HTML 1.0       1991

HTML+          1993

HTML 2.0       1995

HTML 3.2       1997

HTML 4.0       1999

XHTML           2000

HTML 5          2012

 

 

 

 

 

 

 

 

 

 

 
Elements or tags
<html></html>
Attributes that modify an element
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

General format of an element:

<startTag>Target content</endTag>

HTML is NOT case sensitive…

<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
<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”
<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

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
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


<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 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 url can also be a mailto: link

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)

Two main types:

Unordered list
<ul></ul>
Ordered List
<ol></ol>
List items are indicated by <li></li>

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>

 

Subjects:

Add new comment

Sponsored Links