Slide 1 : HTML Trainer: Mehaboob Basha
mbasha@focussac.com
Slide 2 : Introduction
Creation
Tags
Text
List
Image
Background
Link
Table
Frames
Forms HTML
Slide 3 : SGML – Standard Generalized Markup Language (1986)
Mother of HTML and XML
Describing document types in many field of human activity (clinical records to musical notations)
Used in Aerospace, Defense, Semiconductor and Publishing industries Introduction
Slide 4 : Lack of widely supported style sheets
Complex and unstable software
Obstacles to interchange SGML data
SGML renamed as Sounds Good, May be Later. SGML - Barriers
Slide 5 : Hyper Text Markup Language
Hypertext – Dealing with links
Markup – Designing documents with some styles or lay outs
HTML document is a plain text file
HTML recognized by Web Browser HTML
Slide 6 : Use Notepad or any text editor
Type contents and save with a .htm or .html extension
Eg. MyPage.html HTML Creation
Slide 7 : HTML is the glue that holds all web pages together.
You can use tags that the editor does not support.
You can read the code of other people's pages, and "borrow" the effects.
You can do the work yourself, when the editor simply refuses to create the effects you want. Why to learn HTML?
Slide 8 :
First Web Page
Slide 9 : Instructs the browser to do some operation.
Pillar of HTML
Start Tag and End Tag
Few examples:
, etc
Every tag may or may not have Attributes.
Tags
Slide 10 : Anything that we type between the tags
and will appear on the browser.
Many formatting tags are available. Technical Skills Learning Center
Online learning made EASY!!! Adding Text
Slide 11 : , , , , ,
, ,, ,
Slide 12 :
(same as
)
Right
Left
Center
Justify Text Layout
Slide 13 : Ordered List
If TYPE is left, by default we have Numbers.
TYPE can also take values like A, a, i, I
We can configure the numbering to start from a particular value with the help of “start” attribute.
Unordered list
TYPE can be circle or square or disc HTML ListSlide 14 : JPEG or GIF or any images are recognized by browsers
![]()
tag will place image on your page
The attribute SRC, tells the location from which the image is to be taken
We can control size of the image (width and height attributes)
The attribute BORDER specifies the thickness of border around the image.
Aligning images is also possible with the align property Images
Slide 15 : - Anchor tag
Its attribute – HREF will be the page to which we will be redirected.
Click Here
Click Here will appear in the browser like this
Click Here Hyperlink
Slide 16 : Define colors for all links on the page.
Link – Unvisited link
Vlink – Visited link
Alink – Active link (Color of the link on mouse over) Specifying colors for linksSlide 17 : Define colors for individual links on the page.
Placing font tags between the and the tag.Click here to go to Google.
Using a style setting in the tag. Click here to go to Google. Specifying colors for links
Slide 18 : By default, links will open in the current window
We can specify values for the Target attribute to change this behaviour.
_blank – new window
_self – same window Link Target
Slide 19 : Email Me
This will appear in the page as
Email Me
When we click that, we can compose mail and send it to that address. Link to E-mail
Slide 20 : Help in arranging elements in our page in a neat way
Divide page into separate sections
Creating Menus
Adding form fields
Alignment of images Tables
Slide 21 : Table -
Row -
Column - |
Table CreationSlide 22 : Align – left, right, center
Valign – top or bottom
Bgcolor
Border
Bordercolor
Cellpadding
Cellspacing
Nowrap – protects from line break
Width Table Attributes
Slide 23 : All property of table.
Height
Only for TD
Rowspan – Merging rows
Colspan – Merging columns
nowrap Row / Column Attributes
Slide 24 : Divides screen into separate areas
Each frame can contain a HTML document
tag
Attributes
Cols
Rows FramesSlide 25 : By default, we can resize frames.
If we don’t want to resize them, we can specify the same using the attribute “noresize”.
If we don’t need scroll bars, we can specify scrolling attribute as no.
If we give scrolling=auto, scroll bar will appear if needed. Otherwise it wont. Resizing and Scrolling
Slide 26 : Most widely used in web applications
Has several elements
Created with in
Use
tags to define elements of form HTML Forms
Slide 27 : Text
Password
Hidden
Text area
Submit button
Cancel button
Image button
Check box
Radio button
Drop down menu Form Fields
Slide 28 :
Text / Password / Hidden
Slide 29 :
Cols and rows specifies how many columns and rows will the text are occupy on our page.
Name – Program will use this name to refer to the element Text area
Slide 30 : Java
Oracle
.Net
For Radio button, the type need to be given as “radio” Checkbox
Slide 31 : Using Select tag we can define dropdown menu
Select tag has attributes like
Name
Size
Multiple
Option tag defines values in the list
Dropdown List
Slide 32 :
Submit / Reset / Image button
Slide 33 :
©
>
< Technical Skills Learning Center
Online learning made EASY!!! Special Characters
Slide 34 : Starts with
HTML Comments
Slide 35 : RGB Style
#RGB
Safe 216 colors
R – 00, 33, 66, 99, CC, FF
G – 00, 33, 66, 99, CC, FF
B – 00, 33, 66, 99, CC, FF HTML Hexa Colours
Slide 36 : Technical Skills Learning Center
Online learning made EASY!!! Questions? Contact : mbasha@focussac.com