Scribd
Upload
2 views

unit-i HTML

Uploaded by

Kassahun
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

unit-i HTML

Uploaded by

Kassahun
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

Subject Name: Static Webpage Design Unit No: I Subject Code: 4311603

Unit I: Basics of HTML


 Basics of HTML

HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web
Pages. As its name suggests, HTML is a markup language.

 Hypertext refers to the way in which Web pages (HTML documents) are linked together. When you click a
link in a Web page, you are using hypertext.
 Markup Language describes how HTML works. With a markup language, you simply "mark up" a text
document with tags that tell a Web browser how to structure it to display.

 Writing HTML Using Notepad or TextEdit

Notepad (PC) is a simple text editor to learn HTML.

Follow the 4 steps below to create your first web page with Notepad.

Step 1: Start Notepad

To start Notepad

Start  All Programs  Accessories  Notepad

Step 2: Edit Your HTML with Notepad

Type your HTML code into your Notepad:

Step 3: Save Your HTML

Select Save in Notepad's file menu.

When you save an HTML file, you can use either the .htm or the .html file extension. Save the file in a
folder that is easy to remember.

Step 4: Run the HTML in Your Browser

Start your web browser (e.g. Microsoft Internet Explorer) and open your html file from the File, Open
menu, or just browse the folder and double-click your HTML file.

 HTML Document Structure:

Basic structure Tags: - <DOCTYPE>, <HTML>, <HEAD>, <TITLE>, <BODY>

Department of Computer Engineering Page 1


Subject Name: Static Webpage Design Unit No: I Subject Code: 4311603

An HTML document
starts and ends with <html> and </html> tags. These tags tell the browser that the entire document is
composed in HTML. Inside these two tags, the document is split into two sections:

 The <head>...</head> elements, which contain information about the document such as title of the
document, author of the document etc. Information inside this tag does not display outside.
 The <body>...</body> elements, which contain the real content of the document that you see on your
screen.

 How to View HTML Source

A good way to learn HTML is to look at how other people have coded their html pages.
Department of Computer Engineering Page 2
Subject Name: Static Webpage Design Unit No: I Subject Code: 4311603

To find out, simply click on the View option in your browsers toolbar and select Source or Page Source.
This will open a window that shows you the actual HTML of the page. Go ahead and view the source html
for this page.

 HTML Versions

Since the early days of the web, there have been many versions of HTML:

Version Year

HTML 1991

HTML+ 1993

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 1.0 2000

HTML5 2012

XHTML5 2013

 HTML Tags

What are HTML tags?

 HTML tags are used to mark-up HTML elements


 HTML tags are surrounded by the two characters < and >
 The surrounding characters are called angle brackets
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 The text between the start and end tags is the element content
 HTML tags are not case sensitive, <b> means the same as <B>

Logical vs. Physical Tags


In HTML there are both logical tags and physical tags.

Logical tags are designed to describe (to the browser) the enclosed text's meaning.

Department of Computer Engineering Page 3


Subject Name: Static Webpage Design Unit No: I Subject Code: 4311603

An example of a logical tag is the <strong> </strong> tag. By default all browsers make the text appear bold
when in between the <strong> and </strong> tags.

Physical tags on the other hand provide specific instructions on how to display the text they enclose.
Examples of physical tags include:
 <b>: Makes the text bold.
 <big>: Makes the text usually one size bigger than what's around it.
 <i>: Makes text italic.

 HTML Elements

Consider the HTML example:

<html>
<head>
<title>My First Webpage</title>
</head>
<body>
This is my first homepage.
<b>This text is bold</b>
</body>
</html>

This is an HTML element:

<b>This text is bold</b>


The HTML element begins with a start tag: <b>
The content of the HTML element is: This text is bold
The HTML element ends with an end tag: </b>

This is also an HTML element:

<body>
This is my first homepage. <b>This text is bold</b>
</body>

This HTML element starts with the start tag <body>, and ends with the end tag </body>. The purpose of the
<body> tag is to define the HTML element that contains the body of the HTML document.

Nested Tags

You may have noticed in the example above, the <body> tag also contains other tags, like the <b> tab.
When you enclose an element in with multiple tags, the last tag opened should be the first tag closed.

Example:
<p>

Department of Computer Engineering Page 4


Subject Name: Static Webpage Design Unit No: I Subject Code: 4311603

<b><em>This is the proper way to close nested tags. </em></b>


</p>

 Tag Attributes

Tags can have attributes. Attributes can provide additional information about the HTML elements on your
page.

The <tag> tells the browser to do something, while the attribute tells the browser how to do it.

For instance, if we add the bgcolor attribute, we can tell the browser that the background color of your page
should be blue, like this: <body bgcolor="blue">.

This tag defines an HTML table: <table>. With an added border attribute, you can tell the browser that the
table should have no borders: <table border="0">.

Attributes always come in name/value pairs like this: name="value".

Attributes are always added to the start tag of an HTML element and the value is surrounded by quotes.

 Basic HTML Tags


 Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading while <h6> defines the
smallest.
<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
<h4>This is a heading 4</h4>

<h5>This is a heading 5</h5>

<h6> This is a heading 6</h6>


HTML automatically adds an extra blank line before and after a heading. A useful heading attribute is align.

<h5 align="left">I can align headings </h5>


<h5 align="center">This is a centered heading </h5>
<h5 align="right">This is a heading aligned to the right </h5>

Department of Computer Engineering Page 5


Subject Name: Static Webpage Design Unit No: I Subject Code: 4311603

 Paragraphs

Paragraphs are defined with the <p> tag. Think of a paragraph as a block of text. You can use the align
attribute with a paragraph tag as well.
<p align="left">This is a paragraph</p>
<p align="center">this is another paragraph</p>

 Line Breaks
The <br> is used to break the lines.

This code Would display


<p>This <br> is a para<br> graph with line This
breaks</p> is a para
graph with line breaks

The <br> tag has no closing tag.

 Horizontal Rule

The <hr> element is used for horizontal rules that act as dividers between sections, like this:
The horizontal rule does not have a closing tag. It takes attributes such as align and width.

 Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A comment can be placed
anywhere in the document and the browser will ignore everything inside the brackets. You can use
comments to write notes to yourself, or write a helpful message to someone looking at your source code.

Example:

Open your text editor and type the following text:


<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1 align="center">My First Webpage</h1>
<p>Welcome to my first web page. I am writing this page using a text editor and html.</p>
<p>By learning html, I'll be able to create web pages....<br>
which I am learning in this course.</p>
</body>
</html>

Department of Computer Engineering Page 6


Subject Name: Static Webpage Design Unit No: I Subject Code: 4311603

 List of Other HTML Tags

Physical Tags Tag Description


<b> Defines bold text
<big> Defines big text
<i> Defines italic text
<small> Defines small text
superscripted
<sup> Defines text
<sub> Defines subscripted text
<tt> Defines teletype text
<u> Deprecated. Use styles instead

 HTML Fonts
The <font> tag in HTML is deprecated. The World Wide Web Consortium (W3C) has removed the <font>
tag from its recommendations. In future versions of HTML, style sheets (CSS) will be used to define the
layout and display properties of HTML elements.

 HTML Backgrounds

Backgrounds

The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an
image.

Bgcolor

The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute can be a
hexadecimal number, an RGB value, or a color name:
<body bgcolor="#000000"> OR
<body bgcolor="rgb(0,0,0)"> OR
<body bgcolor="black">
The lines above all set the background-color to black.

Background

The background attribute can also specify a background-image for an HTML page.
The value of this attribute is the URL of the image you want to use.

<body background="clouds.gif">
<body background="http://myfolder/clouds.gif">

The URL can be relative (as in the first line above) or absolute (as in the second line above).

Department of Computer Engineering Page 7


Subject Name: Static Webpage Design Unit No: I Subject Code: 4311603

Open your text editor and type the following text:

<html>
<head>
<title>My First Webpage</title>
</head>
<body background="http://myfolder/clouds.gif" bgcolor="#EDDD9E">
<h1 align="center">My First Webpage</h1>
<p>Welcome to my <strong>first</strong> webpage. I am writing this page using a text editor
and plain old html.</p>
<p>By learning html, I'll be able to create webpages like a <del>beginner</del>
programmer....<br> </p>
</body>
</html>

 HTML Links

HTML uses the <a> anchor tag to create a link to another document or web page.

The Anchor Tag and the Href Attribute

An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. The
syntax of creating an anchor:

<a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to tell the address of the
document or page we are linking to, and the words between the open and close of the anchor tag will be
displayed as a hyperlink.

The Target Attribute

With the target attribute, you can define where the linked document will be opened. By default, the link will
open in the current window. The code below will open the document in a new browser window:

<a href=http://www.austincc.edu/ target="_blank">Visit ACC!</a>

Email Links

To create an email link, you will use mailto: plus your email address. Here is a link to ACC's Help Desk:

<a href="mailto:[email protected]">Email Help Desk</a>

To add a subject for the email message, you would add ?subject= after the email address. For example:
Department of Computer Engineering Page 8
Subject Name: Static Webpage Design Unit No: I Subject Code: 4311603

<a href="mailto:[email protected]?subject=Email Assistance">Email Help Desk</a>

The Anchor Tag and the Name Attribute


The name attribute is used to create a named anchor. When using named anchors we can create links that
can jump directly to a specific section on a page, instead of letting the user scroll around to find what he/she
is looking for.
Unlike an anchor that uses href, a named anchor doesn't change the appearance of the text (unless you set
styles for that anchor) or indicate in any way that there is anything special about the text.

Below is the syntax of a named anchor:

<a name="top">Text to be displayed</a>

To link directly to the top section, add a # sign and the name of the anchor to the end of a URL, like this:

 HTML Images

The Image Tag and the Src Attribute

The <img> tag is empty, which means that it contains attributes only and it has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source".
The value of the src attribute is the URL of the image you want to display on your page. The syntax of
defining an image:

<img src="water lilly.gif">

 HTML Tables
 Tables are defined with the <table> tag.
 A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td>
tag).
 The letters td stands for table data, which is the content of a data cell.
 A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc
<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
Department of Computer Engineering Page 9
Subject Name: Static Webpage Design Unit No: I Subject Code: 4311603

</tr>
</table>

Tables and the Border Attribute

To display a table with borders, you will use the border attribute.
<table border="1">

Headings in a Table

Headings in a table are defined with the <th> tag.

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Cell Padding and Spacing

 The <table> tag has two attributes known as cellspacing and cellpadding.
 Here is a table example without these properties.
 These properties may be used separately or together.
 Cellspacing is the pixel width between the individual data cells in the table (The thickness of the
lines making the table grid).
 The default is zero.
 If the border is set at 0, the cellspacing lines will be invisible.

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


<tr>
<td>some text</td>
<td>some text</td>
</tr>

Department of Computer Engineering Page 10


Subject Name: Static Webpage Design Unit No: I Subject Code: 4311603

<tr>
<td>some text</td>
<td>some text</td>
</tr>
</table>

Table Tags

Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a table

 Marquee

A simple syntax to use marquee is as follows:

<marquee attribute_name="attribute_value"....more attributes>

</marquee>

A HTML marquee can have following attributes:

 width: how wide the marquee is. This will have a value like 10 or 20%etc.
 height: how tall the marquee is. This will have a value like 10 or 20% etc.
 direction: which direction the marquee should scroll. This will have value either up, down, left or right.
 behavior: what type of scrolling. This will have value scroll, slid and alternate.
 loop: how many times to loop. The default value is INFINITE, which means that the marquee loops
endlessly.
 bgcolor: background color. This will have any color name or color hex value.
 hspace: horizontal space around the marquee. This will have a value like 10 or 20%etc.
 vspace: vertical space around the marquee. This will have a value like 10 or 20%etc.

Examples:

< marquee>This is basic example of marquee</marquee>

< marquee width="50%">This example will take only 50% width</marquee>

< marquee direction="right">This text will scroll from left to right</marquee>


Department of Computer Engineering Page 11
Subject Name: Static Webpage Design Unit No: I Subject Code: 4311603

< marquee direction="up">This text will scroll from bottom to up</marquee>

Adding Audio:

HTML5 provides a quick and easy way to add audio and video files to be played on a website. Using the
audio element an audio clip can be added to a page. Just as with the img element, an audio element also
needs a source URL specified via the src attribute.

<audio src="images-audio-video/jazz.ogg"></audio>

Adding Video:

Adding in HTML videos is very similar to that of adding in audio. In this case however, we use the video
element in place of the audio element.

<video src="earth.ogv" ></video>

Department of Computer Engineering Page 12

You might also like