Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
956 views

HTML Tutorial W3schools

HTML (Hyper Text Markup Language) is used to describe web pages. HTML uses tags like <html> to mark elements in a web page. Common tags are <head> <title> <body> <h1> <p> to define webpage structure and content. This tutorial provides an introduction to essential HTML tags for formatting text, adding images, links, tables and lists. It also discusses CSS for styling, and escape characters. An example HTML code is provided to demonstrate the use of basic tags.

Uploaded by

Jose Augusto Peña Cabrera
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
956 views

HTML Tutorial W3schools

HTML (Hyper Text Markup Language) is used to describe web pages. HTML uses tags like <html> to mark elements in a web page. Common tags are <head> <title> <body> <h1> <p> to define webpage structure and content. This tutorial provides an introduction to essential HTML tags for formatting text, adding images, links, tables and lists. It also discusses CSS for styling, and escape characters. An example HTML code is provided to demonstrate the use of basic tags.

Uploaded by

Jose Augusto Peña Cabrera
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

HTML Tutorial (adapted from w3schools)

What is HTML?
HTML (Hyper Text Markup Language) is a language for describing web pages.
Terms

HTML tags are keywords surrounded by angle brackets like <html>. HTML tags
normally come in pairs, with starting and ending tags, like <b> and </b>.
Everything from the start to the end tag is called HTML element. Empty elements like
<br> do not have closing tags. Tags are not case sensitive, so <P> means the same as <p>.
HTML elements can have attributes, which provide additional information about the
element. Attributes are always specified in the start tag, and come in name-value pairs like
name=value. Values are always enclosed in quotes i.e. name = Joe. Attribute names and values are
case insensitive.
This tutorial will give you all the essential tags that you will need for your assignment. For
additional tags, please refer the complete HTML reference, listed at http://www.w3schools.com/
tags/default.asp. You can play around with HTML tags by using the HTML editor available on the
w3schools website - http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
HTML example
Open a text editor (for eg Notepad on Windows, Emacs/vi on MAC). Type the following
example and save the file as hello.html (You could also save it using a .htm extension).

<html>
<head>
<title>
My first html page
</title>
</head>
<body>
<h1>Hello World</h1>
<p>Hello world, my name is Joe.</p>
</body>
</html>
In this example, the text between <html> and </html> describes the web page. Head
elements, like title are included in between <head> and </head>. The title of the web page is
specified between <title> and </title>. The text between <body> and </body> is the visible page
content. The text between <h1> and </h1> is displayed as a heading. The text between <p> and
</p> is displayed as a paragraph.
HTML Basic
Headings are defined with <h1> to <h6> tags.

<h1>This is a heading>/h1>

Paragraphs are defined with the <p> tags.

<p> This is a paragraph </p>

Links are defined with <a> tags

<a href= http://cs.dartmouth.edu>Dartmouth Computer Science</a>

Images are defined with <img> tags

HTML Tutorial (adapted from w3schools)


<img src= image.jpg />

Comments are defined between <!-- and -->. Please get into the habit of adding comments
to make your html code readable.

<!-- This is a comment -->

A line break is defined as <br/>


A horizontal rule is introduced using a <hr/>
Tags
Formatting
<b> - Bold
<i> - Italic
<big> - Big
<small> - Small
<strong> - Strong
<em> - Emphasized
Fonts

<font size = 5 face= arial color= red >


This sentence is in Arial, size 5 and text color is red.
</font>
You can also specify the size relative to the current size i.e. size= +1

Styles

CSS is used to style HTML elements. CSS can be added to HTML as a separate style sheet
file (css file), in the style element in HTML head section or in the style attribute in HTML elements.
The preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files. Please
refer to the CSS section of the tutorial to learn more about styles. Below is an example to add style
to a HTML element.

<h2 style= background-color:red;>This is a heading with red background</h2>


<p style="font-family:arial;color:white;font-size:20px;">This paragraph is in font arial, text color
white and of text size 20px.</p>
Links

Links are specified using the <a> tag and can be used either to

- link to another document (using href)

<a href= http://cs.dartmouth.edu target= _blank>Open Dartmouth CS department web


page in a new window </a>
target attribute specifies where to open the linked document.
- to create a bookmark inside the document (using name)

<a name= cs89>CS89</a> creates a named anchor

HTML Tutorial (adapted from w3schools)


<a href= #cs89>UIDesign - CS89</a> creates a link to the CS89 section in the same

document

<a href= http://cs.dartmouth.edu/courses.html#cs89> UIDesign - CS89 </a> creates a

link to the CS89 section from another page. Please note that such a page doesnt exist!
It is possible to use an image as a link as well.

a>

<a href= http://cs.dartmouth.edu/courses.html#cs89> <img src= image.jpg /></

You could also link to a mail message, if you have mail installed.

<a href="mailto:someone@example.com?Subject=Hello%20again">
Send Mail</a>
Images

<img src= image.jpg alt= An image width= 300 height= 220/>


url points to the location where the images is stored and alt specifies alternate text for an
image, if the image cannot be displayed. It is better to specify the height and width of an
image. Please ensure that the image is in the location that you specify, else visitors will get a
broken link.
You can create image maps using <map> and <area> tags.

<p>Click on the sun or on one of the planets to watch it closer:</p>


<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
<map> defines clickable areas on the image. <area> creates the clickable areas.

Tables
Tables are defined using <table> tag. Tables are divided into rows (<tr> tag); each row into
data cells (<td> tags). The data cells can contain text, images, lists, forms, other tables etc. Table
headers are specified using <th> tags. Cellpadding attribute creates more white space between the
cell content and its borders. Cellspacing attribute increases distance between cells.

<table border="1" cellpadding= 10 cellspacing= 5>


<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>

HTML Tutorial (adapted from w3schools)


<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Lists

An unordered list starts with <ul> tag. Each item starts with <li> tag. List items are marked
with bullets.

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

An ordered list starts with the <ol> tag. List items are marked with numbers.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

A definition list is a list of terms, with a description of each item and is defined using <dl>
tag. <dt> defines an item in the list and <dd> describes the item.

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Escape characters
You might need to specify entity names to introduce certain symbols on your
webpage. You can find a list of escape characters here - http://
www.theukwebdesigncompany.com/articles/entity-escape-characters.php

You might also like