Html introduction by ikram niaz

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>

</html>

< body> < h1>This a Heading</h1> < p>This is a paragraph.</p> < p>This is another

paragraph.</p>< /body>

HTML

By: Muhammad Ikram Niaz

Introduction part 2 Of 3

http://youtu.be/MUodbKsEWA0

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 <head> element

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.

<title> Dawha School </title>

HTML - <BODY> ELEMENT

The body elements contain all of the page's viewable content.

(paragraphs, pictures, tables, heading, bullets, 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

http://www.w3schools.com/tags/tag_font_style.asp


http://www.w3schools.com/tags/tag_phrase_elements.asp








http://www.w3schools.com/tags/tag_sup.asp

http://www.w3schools.com/tags/tag_sup.asp

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>< li>Milk</li>< /ul>

• Coffee• Milk

EXAMPLES <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ol>

1. Apples2. Banan

as3. Lemon

s4. Orang

es

<ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ol>

A. ApplesB. Banan

asC. Lemon

sD. Orang

es

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

o Appleso Bananaso Lemonso Oranges

MUHAMMAD IKRAM NIAZ

Thanks for Watching this video ! Please comments.

HTML

By: Muhammad Ikram Niaz

Introduction part 3 Of 3

Objectives:1.Heading tags

<h1>2.Paragraphs tags

<p>3.Links <a>4.Image tag

<img>5.Ordered list

<ol>

6.Definition list<dl>

7.Unordered list<ul>

8.Formatting tags9.Colors10.Tables

Html introduction by ikram niaz

Education

Transcript of Html introduction by ikram niaz