HTML Introduction

WHAT IS HTML?
 HTML is a language for describing web pages.
 HTML stands for Hyper Text Markup Language
 HTML is not a programming language, it is a
markup language
 A markup language is a set of markup tags
 The purpose of the tags are to describe page
contents.

HTML TAGS
 HTML markup tags are usually called HTML tags
 HTML tags are keywords (tag names) surrounded by
angle brackets like <html>
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, <b>, the second
tag is the end tag, </b>.
 The end tag is written like the start tag, with a
forward slash before the tag name

HTML DOCUMENTS = WEB PAGES
 HTML documents describe web pages
 HTML documents contain HTML tags and
plain text
 HTML documents are also called web
pages

HTML PAGE STRUCTURE
<html>
<head>
</head>
< body>
< h1>This a Heading</h1>
< p>This is a paragraph.</p>
< p>This is another paragraph.</p>
< /body>
</html>

HTML
Introduction part 2 Of 3

By: Muhammad Ikram Niaz

HTML - <HEAD> ELEMENT
 The <head> is usually the first element contained
inside the <html> element. While it is also an element
container that encapsulates other HTML
elements, these elements are not directly displayed
by a web browser, they function behind the
scenes, providing more descriptive information about
the HTML document, like page title and other meta
data.
 Elements used for scripting (JavaScript) and
formatting (CSS) are also contained within the

HTML - <TITLE> ELEMENT
 The <title> element adds a title to a web page. Web
page titles are displayed at the top of any browser
window or at the top of browser tabs. They are
probably the first thing seen by web surfers as pages
are loaded,
 web pages bookmark/Favorites ___saved using the
web pages' titles.
 A proper title makes a good first impression, and any
page caught without a title is considered
unprofessional.

HTML - <BODY> ELEMENT
 The body elements contain all of the page's
viewable content.

(paragraphs, pictures, tables, heading, bullet
s, numbering, unorderlist, colors, etc.)

BACKGROUND COLOUR AND GRAPHICS
 Attributes of <BODY>
 BGCOLOR=”code”
 Specify color for background of the screen
 BACKGROUND=”path/file”
 Tiles the graphic in the file to fit the screen
<BODY BGCOLOR=”green”>
<BODY BGCOLOR=”#00FF00”>
<BODY BACKGROUND=”abcpict.jpg”>

CHANGING FONT
 <FONT>…</FONT>
 Attributes
 SIZE=“…”(font size, 1 through 7)
 COLOR=“…” (font colour)
 FACE=“…” (font type)

 <FONT SIZE=“3” COLOR=“#FF9933”
FACE=“tahoma”> …</FONT>

TAGS & ATTRIBUTES
 <body> Started Body of the webpage
 </body>
 bgcolor Attribute
 <body bgcolor= "Red" > Started Red colored
Body of the webpage </body>

HTML ATTRIBUTES
 HTML elements can have attributes
 Attributes provide additional information
about an element
 Attributes are always specified in the start
tag
 Attributes come in name/value pairs like:
name="value"

ATTRIBUTE EXAMPLE
 HTML links are defined with the <a> tag. The
link address is specified in the href attribute:
 <a href="http://www.dawhaschool.ae">This is
a my school website</a>

HTML HEADINGS
 Headings are defined with the <h1> to <h6>
tags.
<h1> This is a heading 1</h1>
< h2>This is a heading 2</h2>
< h3>This is a heading 3</h3>

HTML TEXT FORMATTING TAGS
 <b>Defines bold text
 <big>Defines big text
 <em>Defines emphasized text
 <i>Defines italic text
 <small>Defines small text
 <strong>Defines strong text
 <sub>Defines subscripted text
 <sup>Defines superscripted text

HTML IMAGES
 <img src="url" alt="some_text"/>
 Src mean source of the image.

 alt attribute specifies an alternate text for an
image, if the image cannot be displayed.
 <img src= " image29.jpg" alt= “Ikram Pic"
width="304" height="228" />

HTML HYPERLINKS (LINKS)
 A hyperlink (or link) is a word, group of
words, or image that you can click on to jump
to a new document or a new section within
the current document.
 When you move the cursor over a link in a
Web page, the arrow will turn into a little
hand.

 Links are specified in HTML using the <a> tag.
 The <a> tag can be used in two ways:

1. To create a link to another document, by using
the href attribute.
2. To create a bookmark inside a document, by
using the name attribute.
 <a href="url">Link text</a>

 <a href=“http://www.dawhaschool.ae">Dawha
School, Sharjah</a>

HTML UNORDERED LISTS
 An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
 The list items are marked with bullets
(typically small black circles).
<ul>
< li>Coffee</li> • Coffee
< li>Milk</li> • Milk
< /ul>

EXAMPLES
<ol> <ol type="A">
1. Apples A. Apples
<li>Apples</li> <li>Apples</li>
2. Banana B. Banana
<li>Bananas</li> <li>Bananas</li>
s s
<li>Lemons</li> <li>Lemons</li>
3. Lemons C. Lemons
<li>Oranges</li> <li>Oranges</li>
4. Orange D. Orange
</ol> </ol>
s s

<ul type="circle">
<li>Apples</li> o Apples
<li>Bananas</li> o Bananas
<li>Lemons</li> o Lemons
<li>Oranges</li> o Oranges
</ul>

Thanks for Watching this video ! Please comments.

MUHAMMAD IKRAM NIAZ

HTML
Introduction part 3 Of 3

By: Muhammad Ikram Niaz

Objectives:
1. Heading tags <h1> 6. Definition list<dl>
2. Paragraphs tags 7. Unordered list<ul>
<p> 8. Formatting tags
3. Links <a> 9. Colors
4. Image tag <img> 10.Tables
5. Ordered list <ol>

HTML Introduction

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie HTML Introduction

Ähnlich wie HTML Introduction (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

HTML Introduction