Html

HTML(Hyper Text Markup Language)
MN. Sofna(BSc in MIT)
Lecturer: IT cum Management
BCAS Kalmunai.
©sofna@bcas.lk

What is HTML?
HTML is the standard markup language for creating Web pages.
•HTML stands for Hyper Text Markup Language
•HTML describes the structure of a Web page
•HTML consists of a series of elements
•HTML elements tell the browser how to display the content
•HTML elements are represented by tags
•HTML tags label pieces of content such as "heading", "paragra
ph", "table", and so on
•Browsers do not display the HTML tags, but use them to render
the content of the page©sofna@bcas.lk

A Simple HTML Document
Example
•The <!DOCTYPE html> declaration defines this doc
ument to be HTML5
•The <html> element is the root element of an HTML
page
•The <head> element contains meta information abou
t the document
•The <title> element specifies a title for the document
•The <body> element contains the visible page conten
t
•The <h1> element defines a large heading
•The <p> element defines a paragraph
©sofna@bcas.lk

HTML Tags
•HTML tags normally come in pairs like <p> and </p>
•The first tag in a pair is the start tag(Opening Tag), the seco
nd tag is the end tag(Closing Tag
•The end tag is written like the start tag, but with a forward sl
ash inserted before the tag name
©sofna@bcas.lk

Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) i
s to read HTML documents and display them.
The browser does not display the HTML tags, but uses them to
determine how to display the document:
©sofna@bcas.lk

HTML Page Structure
Below is a visualization of an HTML page structure:
©sofna@bcas.lk

HTML Editors
Write HTML Using Notepad or TextEdit.
Web pages can be created and modified by using profession
al HTML editors.
However, for learning HTML we recommend a simple text e
ditor like Notepad (PC) or TextEdit (Mac).
©sofna@bcas.lk

Step 1: Open Notepad (PC)
Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on
your screen). Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
Step 2: Write Some HTML
©sofna@bcas.lk

Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as in the Notep
ad menu.
Name the file "index.html" and set the encoding to UTF-8(whic
h is the preferred encoding for HTML files).
©sofna@bcas.lk

Step 4: View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser (double click
on the file, or right-click - and choose "Open with").
The result will look much like this:
©sofna@bcas.lk

HTML Documents
All HTML documents must start with a document type declaratio
n: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </h
tml>.
The visible part of the HTML document is between <body> and <
/body>.
©sofna@bcas.lk

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least i
mportant heading:
Example:
©sofna@bcas.lk

HTML Paragraphs
HTML paragraphs are defined with the <
p> tag
Example:
HTML Links
HTML links are defined with the <a> tag:
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTM
L elements.
©sofna@bcas.lk

HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are
provided as attributes:
Example:
HTML Buttons
HTML buttons are defined with the <button> tag:
Example
©sofna@bcas.lk

HTML Lists
HTML lists are defined with the <ul> (unordered/bullet list) or th
e <ol> (ordered/numbered list) tag, followed by <li> tags (list ite
ms):
Example
©sofna@bcas.lk

HTML Elements
An HTML element usually consists of a start tag and an end tag,
with the content inserted in between:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end ta
g:
<p>My first paragraph.</p>
©sofna@bcas.lk

Nested HTML Elements
HTML elements can be nested (elements can contain elements).
All HTML documents consist of nested HTML elements.
This example contains four HTML elements:
Example
©sofna@bcas.lk

Attributes provide additional information about HTML elements
•All HTML elements can have attributes
•Attributes provide additional information about an element
•Attributes are always specified in the start tag
•Attributes usually come in name/value pairs like: name="value
"
HTMLAttributes
©sofna@bcas.lk

• All HTML elements can have attributes
• The title attribute provides additional "tool-tip" information
• The href attribute provides address information for links
• The width and height attributes provide size information for
images
• The alt attribute provides text for screen readers
• At W3Schools we always use lowercase attribute names
• At W3Schools we always quote attribute values
©sofna@bcas.lk

The href Attribute
HTML links are defined with the <a> tag. The link address is spe
cified in the href attribute:
Example:
The src Attribute
HTML images are defined with the <img> tag.
The filename of the image source is specified in the src attribute:
©sofna@bcas.lk

The width and height Attributes
HTML images also have width and height attributes, which spec
ifies the width and height of the image:
Example:
The style Attribute
The style attribute is used to specify the styling of an element,
like color, font, size etc.
Example:
©sofna@bcas.lk

HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a
new paragraph:
Example:
©sofna@bcas.lk

Background Color
The CSS background-color property defines the background col
or for an HTML element.
This example sets the background color for a page to powder bl
ue:
HTML Styles
Text Color
The CSS color property defines the text color for an HTML elem
ent:
Example:
©sofna@bcas.lk

Fonts
The CSS font-family property defines the font to be used for an
HTML element:
Text Size
The CSS font-size property defines the text size for an HTML
element:
©sofna@bcas.lk

Text Alignment
The CSS text-align property defines the horizontal text alignmen
t for an HTML element:
Chapter Summary
•Use the style attribute for styling HTML elements
•Use background-color for background color
•Use color for text colors
•Use font-family for text fonts
•Use font-size for text sizes
•Use text-align for text alignment ©sofna@bcas.lk

HTML Formatting Elements
In the previous chapter, you learned about the HTML style attrib
ute.
HTML also defines special elements for defining text with a spe
cial meaning.
HTML uses elements like <b> and <i> for formatting output, lik
e bold or italic text.
Formatting elements were designed to display special types of te
xt:
©sofna@bcas.lk

HTML Comment Tags
You can add comments to your HTML source by using t
he following syntax:

•<b> - Bold text
•<strong> - Important text
•<i> - Italic text
•<em> - Emphasized text
•<mark> - Marked text
•<small> - Small text
•<del> - Deleted text
•<ins> - Inserted text
•<sub> - Subscript text
•<sup> - Superscript text
©sofna@bcas.lk

HTML Images Syntax
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not
have a closing tag.
The src attribute specifies the URL (web address) of the image:
<img src="url">
©sofna@bcas.lk

HTML Tables
An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defi
ned with the <th> tag. By default, table headings are bold and ce
ntered. A table data/cell is defined with the <td> tag.
©sofna@bcas.lk

Html

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Html

Semelhante a Html (20)

Último

Último (20)

Html