Lecture 2 introduction to html

Outlines:
• What is HTML
• Purpose of HTML Language
• Structure of HTML Document
• HTML Editors
• HTML Tags
• Attributes
• HTML Comments

Objectives:
• Understand the HTML Language
• Create a simple web page
• Understand the components of web page

WHAT IS HTML
• HTML stands for Hyper Text Markup Language
• HTML is a language for creating web pages.
• HTML is not a programming language.
• it is a markup language
• A markup language is a set of markup tags
• The markup tags describe how text should be
displayed

Purpose of HTML
Purpose of HTML Language is to create static web sites.

Structure of HTML Document
1. Header section
 <head></head>
 Contains info about web page
2. Body section
 <body></body>
 Contains main content of web page
3. Footer section
 <footer></footer>
 Contains footer content of web page

7
HTML Page Structure
 That's all you need for a basic web page!
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Title</title>
</head>
<body>
<p>This is my first web page.</p>
</body>
<footer>
<p>This is footer section of page.</p>
</footer>
</html>

HTML Text Editor
HTML text editor is used to write HTML
code and save that HTML file.
There are different editors are available to
write HTML code

Recommended Text Editors
(Windows)
• Notepad
• Notepad++
• Macromedia Dream Wear
• GNU Emacs
• Crimson Editor
• ConTEXT
• SciTE
• Komodo Edit
• jEdit
09.16.09

HTML Tags
• HTML is comprised of “elements” and “tags”
• HTML tags are keywords surrounded by angle brackets like
<html>
• HTML tags normally come in pairs like <p> and </p>
• Tags are nested one inside another:
Example: <body> <p> </p> <h1> </h1> </body>
• The first tag in a pair is the start tag, the second tag is the
end tag
Note: The start and end tags are also called the opening and
closing tags.

First HTML Page: Tags
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
13
Opening tag
Closing tag

 HTML Tag:
HTML – Required Tags
 <html> … </html> (Required!)
14
 Basic tag to identify portion of file that contains HTML
 <html> is an opening tag
 </html> is a closing tag (note the direction of the slash!)
 text between the opening and closing tag is called the “element”
 Head Tag:
 <head> … </head> (Required!)
 placed at the top of document immediately after the <html> tag
 tags information about the document, e.g. author, style, etc.
 contains the required document <title>...</title> tag

• Meta Tag:
• <meta>
– is used to specify keywords that describe a document’s
contents as well as a short description.
• Two necessary attributes – "name" & "content"
<meta name="keywords" content="baseball, soccer,
tennis"/>
<meta name="description" content="Sports information
page"/>

16
 Title Tag:
 <title> … </title> (Required!)
 included as an element inside the <head>…</head> section
 element of this tag is the title displayed in title bar of the browser
 may also be used as title of page when page is bookmarked
 should be meaningful and uniquely identify the page
 Body Tag:
 <body> … </body> (Required!)
 included as the second element inside the <html>…</html> tags.
 follows the <head>…</head> portion of the document
 contains the information to be displayed in the browser window
 any attributes set on this tag will apply to the entire page

17
 Paragraph tag:
 <p> … </p> (Required!)
 included as an element inside the <body>…</body> section
 Surrounds a paragraph of text
 Document Type Tag:
 DOCTYPE (Required!)
 Must be the very first line of your file, before <html>
 NOT an HTML tag; it is an instruction to your web browser
 Tells the browser what version of HTML to expect
 In this course we use only the “strict” HTML version 4.01 type:

18
HTML - Basic Tags
• More useful basic tags:
 Line Break tag:
 <br> (no closing tag needed)
 put a line break in the text (starts a new line)
 <p>this is paragraph</p><br>
 <p>this is paragraph</p>
 Heading Tag:
 <h1> … </h1> through <h6> ... </h6>
 used to identify text as a Level 1 (major) to Level 6 (minor) heading
 Code: Output:
<h1>This is first heading</h1> This is first heading

19
HTML - Basic Tags
• The Anchor Tag OR Hyper Linking Tag
 <a> … </a>
 one major attribute – the location of the hyperlink:
 href=”string”
 element is clickable/selectable as a document hyperlink
 browser attempts to load the page specified by the href=
attribute
 the href= string can be a relative URL on the same server:
 without the leading http://host/ it is in the same directory structure:
 e.g. <a href=“page2.html”>Click here to continue</a>
 e.g. <a href=”images/box.jpg”>See the box here.</a>
 e.g. <a href=“../another_dir/page3.html”>Click here</a>

20
HTML - Basic Tags
 Anchor Tag:
<a>…</a> anchor tag continued
 The href= string can be an absolute URL on any server:
 string can be any HTTP URL (web address) you like:
 e.g. <a href=“http://www.gnu.org/philosophy/”>Free Software</a>
 E.g <a href=“http://google.com” target=“_blank”>Google</a>
 The href= string can be an email address:
 string can be an email address preceded by “mailto:”
 e.g. <a href=”mailto:idallen@idallen.ca>Ian! D. Allen email</a>
 Attempts to open an email client (specified in the web browser's
options) and places the specified email address in the To: field of a new
email message.

Anchor Tag Syntax
<html>
<head>
<title>Anchor Tag</title>
</head>
<body>
<a href=“iba-suk.edu.pk” target=“_blank”>IBA
Sukkur</a>
</body>
</html>

22
HTML - Basic Tags
 Image Tag:
 <img> (no closing tag needed)
 used to display graphics (.jpeg, .png, .gif) in your web pages
 you must specify the URL for the image source, and an alt= text
 the basic attributes of <img> are:
 src=”string” - the absolute or relative location of the image file
 alt=”string” - Alternate Text for people who don't see images
 height=”string” - image height, percent or absolute pixels (optional)
 width=”string” - image width, percent or absolute pixels (optional)
 title=”string” - mouse-over title of the image (optional)
 E.g. <img src=“d:/images/iba.gif” width=“500” height=“600”>

Syntax
<img src=“d:/pictures/desert.jpeg”>

24
HTML - Basic Tags
• Horizontal Line Tag:
• <hr> (no closing tag needed)
– Hard/Horizontal Rule – draw a horizontal line
– rule appearance can be changed with styles
• Quotation Tag:
<blockquote> … </blockquote>
– block quotation, indented
• PRE Tag:
• <pre> … </pre>
– preformatted text (e.g. computer code or output)
– fixed-width font (e.g. Courier fixed width)
– preserves spaces and line breaks

ATTRIBUTES
An attribute is a special code that can enhance or modify a tag.
They are generally located in the starting tag after the tag
name.
Attribute Name
Syntax:
<p style=“color: red; font-size:18px”>This is a
paragraph </p>
Attribute Value

HTML COMMENTS
Comment Tag:

Comments are enclosed in
Example

<p>This is a regular paragraph</p>

27
ComDepscrlibee HtTeML VHersTionML Program
Describe HTML Page Type to the browser
"http://www.Define w3.keywords
org/TR/html4/strict.dtd"> <html>
<html>
Define info about web page
<meta name="keywords" content="baseball, soccer, tennis"/>
Define Title of Web Page
<head>
<title> Starts Home the body Page secton </title>
of page
</head>
Define ParagrapDhefine Attribute Name
<body>
Define Comment
<p style=“color: red; font-size:18px”>This is a paragraph. 1</p>
Define Image
<p>This is a paragraph. 2</p>
Define Heading
<img src=“d:/pictures/desert.jpeg” width=“500” height=“600”>
<h1>This is heading</h1>
</body>
</html>

Lecture 2 introduction to html

Related slideshows

More Related Content

Lecture 2 introduction to html