Scribd
Upload
8 views

Chapter 02 - Introduction (1)

Uploaded by

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

Chapter 02 - Introduction (1)

Uploaded by

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

WEB DEVELOPMENT

SE102.3

CHAPTER 02

Introduction to HTML
Ms. Thisarani Wickramasinghe
What is HTML?
HTML (Hyper Text Markup Language) is a language for specifying how text and graphics appear
on a web page.
When you visit a web site (e.g., www.google.com) your web browser retrieves the HTML web
page and renders it.
The HTML page is actually stored on the computer that is hosting the web site and the page is
sent to your browser.
To see what HTML looks like go to your web browser View menu and select View Source
▪ An HTML file is a text file containing small markup tags.
▪An HTML file must have an htm or html file extension.
▪ An HTML file can be created using a simple text editor
What is an HTML Element?

An HTML element is defined by a start tag, some content, and an


end tag.
<tagname>Content goes here…. </tagname>

The first tag in your HTML document is <html>.


-This is the start of an HTML document

The last tag in your document is <html>.


-This is the end of an HTML document
HTML Tag <html>

The format is,

<html>
Your title and the Document (contains text
with HTML tags) goes here
</html>
An HTML document has two distinct parts HEAD and BODY.
Head Tag <Head>
HEAD tag comes after the HTML start tag.

It contains TITLE tag to give the document a title that displays on the browsers
title bar at the top.

<head>
<title>Your title goes here</title>
</head>
▪ <title>……</title> the title tag specifies the title for the web page
Body Tag <Body>
▪ The BODY tag contains all the text and graphics of the document with all the HTML
tags that are used for control and formatting of the page.

▪ The format is,

<body>
Your document goes here
</body>
Creating the First web page
▪An HTML document, web page can be created using a text editor,
Notepad or WordPad.

▪All the HTML documents should have the extension .htm or .html.

▪It require a web browser like Internet Explorer/chrome or opera to


view the document.
Creating the first web page
Follow the steps to create and view in browser:
◦ Step-1: Open text editor Notepad
◦ Step-2: Enter the following lines of code
Creating first web page

Step-3: Save the file as myfirstpage.html (go to File-Save As, give File
name: myfirstpage.html-choose save as type: All Files click save)

Step-4: Viewing document in web browser.


HTML Headings
HTML has six header tags used to specify section headings.
Text with header tags is displayed in larger and bolder fonts than the
normal body text by a web browser.
Every header leaves a blank line above and below it when displayed
in browser.
The first level creates the most significant heading.
The sixth level creates the least significant heading.
HTML Headings
Peculiarities about the web browser on viewing HTML document text

Browsers ignore extra space within HTML document.


Browsers ignore any additional space you type and compress the text as if the
space did not exist.
Browsers ignore your extra line and paragraph breaks.
Generally, you press enter when you want to create line and paragraph breaks,
but they won’t show up when you view the document in browser.
In order to control your paragraph and line breaks, <P> and <BR> tags are used.
Paragraph Tag
This tag <P> indicates a paragraph, used to separate two paragraphs
with a blank line.
Break Tag
• The empty tag <BR> is used, where the text needs to start from a
new line and not continue on the same line.
• To get every sentence on a new line, it is necessary to use a line
break.
Preformatted Text Tag <pre>
• <PRE> tag can be used, where it requires total control over spacing
and line breaks such as typing a poem.
• Browser preserves your space and line break in the text written inside
the tag.
• Text in a <pre> element is displayed in a fixed-width font, and the text
preserves both spaces and line breaks. The text will be displayed
exactly as written in the HTML source code.
Horizontal Rule Tag <HR>
▪ An empty tag <HR> basically used to draw lines and horizontal
rules.
▪ It can be used to separate two sections of text.
Tag Attributes
▪ Tags can have attributes. Attributes provide additional information to an
HTML element.
▪ Attributes are always specified in the start tag.
▪ Attributes usually come in name/value pairs like name="value"
Tag Attribute
Character Formatting Tags
The character formatting tags are used to specify how a particular text should
be displayed on the screen to distinguish certain characters within the
document.

◦ Boldface: <b>…..</b>
◦ Italics: <i>….</i>
◦ Underline: <u>…..</u>
◦ Subscript: <sub>….</sub>
◦ Superscript: <sup>….</sup>
◦ Small: <small>….</small>
◦ Big: <big>….</big>
Font Tag <font>
Attributes of are color, size & face

▪ By using <FONT> Tag one can specify the colors, size, of the text.
COMMENTS
HTML comments are not displayed in the browser, but they can help document
your HTML source code.
Using Some Special Characters/ HTML Character
Entities
▪ There are certain special characters that can be used while creating document

▪ To keep more than one white space can be used.


Using Some Special Characters

The copyright symbol is:©


The registered rank is:®
Exercise
➢ Creating a Web Page
Activity
Create a simple webpage regarding your hobby. Just mention the
details briefly. Use the HTML tags that you learned today.
USING LISTS IN A WEB PAGE
HTML Supports several ways of arranging items in lists.
The most commonly used are:
I. Ordered List (Numbered List)
II. Unordered List (Bulleted List)
Ordered List <OL>
Ordered list also called as Numbered list, is used to present a
numbered list of item in the order of importance or the item
(paragraph) is marked with a number.
An ordered list must begin with the <OL> followed by an <LI> list
item tag.
Unordered List <ul>
▪Unordered List also called as
bulleted list, used to present list
of items marked with bullets.
An unordered list starts with in
<ul> followed by <li> (List Item)
tag.

▪Use of <ul> is very similar to


<ol>(ordered list).
Definition Lists
▪A definition list is not a list of items.
▪This is a list of terms and explanation of the terms.
▪A definition list starts with the <dl> tag. Each definition-list term starts with
the <dt> tag. Each definition-list definition starts with the <dd> tag.
Exercise
I. Write the HTML code to create the following Lists
HTML Links
It is a connection from one web resource to another.
A link has two ends, An anchor and direction.
The link starts at the “source” anchor and points to the “destination” anchor,
which may be any Web resource such as an image
➢a video clip
➢a sound bite
➢a program
➢an HTML document
➢an element within an HTML document.
Syntax explanation
▪a: The HTML <a> tag defines a hyperlink.
▪href : The href attribute is used to specify the destination
address of the link used. "href" stands for Hypertext
reference.
▪Text link : The text link is the visible part of the link. It is
what the viewer clicks on.
Example
target Attribute
Exercise 02
1. Create links for the following search engines
a) Google
b) Yahoo
2. Create a link for www.youtube.com where it should open in a new window.
3. Make this list of links
Html Image Tag Syntax
The <img> tag has two required attributes:

◦ src - Specifies the path to the image


◦ alt - Specifies an alternate text for the image

<img src="url" alt="alternatetext">

<img src="img_chania.jpg" alt="Flowers in Chania">


Use of height and width attribute with
img tag
HTML Links - Use an Image as a Link
To use an image as a link, just put the <img> tag inside the <a> tag:
Happy Coding

You might also like