HTML (1).pptx

Fundamentals of
HTML
By-
Syed Abdullah Hassan
Muhammad Zakriya

INTRODUCTION
HTML, which stands for HyperText Markup Language, is the
predominant markup language for web pages. It provides a means to
create structured documents by denoting structure for text such as
headings, paragraphs, lists, links, quotes, and other items. It allows
images and objects to be embedded and can be used to create
interactive forms. It is written in the form of HTML elements
consisting of "tags" surrounded by angle brackets within the web page
content. It can load scripts in languages such as JavaScript which
affect the behavior of HTML webpages. HTML can also be used to
include Cascading Style Sheets (CSS) to define the appearance and
layout of text and other material.

Markup
HTML markup consists of several key components, including elements like tags and their
attributes). Another important component is the document type declaration, which
specifies the Document Type. As of HTML 5, no Document Type Definition will need to be
specified, and will only determine the layout mode.
The Hello world program, a common computer program employed for comparing
programming languages, scripting languages, and markup languages is made of 9 lines of
code in HTML as:
Sample Program
<!doctype html>
<html>
<head>
<title>Hello HTML</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
This Document Type Declaration is for HTML 5.

HTML documents are composed entirely of HTML
elements that, in their most general form have three
components: a pair of element tags with a "start tag"
and "end tag"; some element attributes
given to the element within the tags; and finally, all the
actual, textual and graphical[clarification
needed], information content that will be rendered on
the display. An HTML element is everything between
and including the tags.

A common form of an HTML element is:
<tag>content to be rendered</tag>
The name of the HTML element is also the name of the tag.
Note that the end tag's name starts with a slash character,
"/".
The most general form of an HTML element is:
● <h2> Heading Tag </h2> ...
● <b> Bold Tag </b> ...
● <i> Italic Tag </i> ...

0
html tag ( <html> ,
</html> )
All the html documents should contain this
html tags. All the contents should be typed
inside these tags. This forms the base of the
document. It tells the browser where the document
starts and where it stops. Everything in the
document goes inside <HTML>, except that
<!DOCTYPE ...> .

All normal webpages consist of a head and a body.
*The head is used for text and tags that do not show
directly on the page.
*The body is used for text and tags that are shown directly on the
page.
Head and body tags

<html>
<head>

</head>
<body>

</body>
</html>
Syntax for head and body tags

HEAD SECTION
The head section of the webpage includes all the
stuff that does not show directly on the resulting
page.
The <title> and </title> tags consists of the title of
your page. The title is what shows in the top of your
browser window when the page is
loaded.

BODY SECTION
The body of the document contains all that can be seen
when the user loads the page.
In the rest of this tutorial you can learn in detail about all
the different aspects of HTML, including:
* Text
* Formatting
* Resizing
* Layout
* Links
* To local pages
* To pages at other sites
* To bookmarks

* Images
* Inserting images (GIF and jpg)
* Adding a link to an image
* Backgrounds
* Colors
* Images
* Fixed Image
* Tables
* Frames
* Forms
* Metatags
* Hexadecimal Colors

Attributes:
LEFTMARGIN: size of left and right margins
MARGINHEIGHT: size of top and bottom margins
MARGINWIDTH: size of left and right margins
onLoad: Script to run once the page is fully loaded
SCROLL = YES | NO
If the document should have a scroll bar

Anchor Tag & Attributes used with Anchor Tag:
<A ...> is the cornerstone of HTML, the tag that makes
hypertext hypertext. <A ...> is the tag you use to make
hyperlinks: the text that you can click on in your web
browser to go to another web page.
HREF: URL you are linking to
* NAME: name a section of the page
* TARGET: which window the document should go in
* TITLE: suggested title for the document to be opened
* onClick: script to run when the user clicks on this anchor
All the above commands can be used in the tag <a ...>
</A> Closes the anchor

<I>
<I> italicizes the text.
<IMG ...>
<IMG ...> puts an image on the web page. <IMG ...> requires two
attributes: SRC and ALT. ALT is always required in
<IMG ...>
ATTRIBUTES:
SRC: where to get the picture
ALT: text to show if you don't show the picture
WIDTH: how wide is the picture
HEIGHT: how tall is the picture
ALIGN = LEFT | RIGHT | TOP | TEXTTOP | MIDDLE |
BORDER: border around the picture

<B> makes the text bold.
Sample:
I <B>really</B> like this idea.
Output:
I really like this idea.

Button Tag and Attributes:
<BUTTON ...> creates a button. Unlike <INPUT ...>,
<BUTTON ...> is a container which allows you to put regular
HTML contents in the button, including text and pictures.
Unfortunately, <BUTTON ...> does not degrade well, and so at
this time it's best to stick with
<INPUT ...>.
* TYPE: what type of button is this
* onClick: script to run when the user clicks here
* NAME: name of this button element
* VALUE: the value sent with the form
* DISABLED: disable this button
* TABINDEX: tab order
All the above commands can be used in <BUTTON ...>

<FORM ...>
* ACTION: URL of the CGI program
* METHOD: how to transfer the data to the CGI
* NAME: name of this form
* onSubmit: script to run before the form is submitted
* onReset: script to run before the form is reset
<FORM ...> indicates the beginning of a form. All other form tags
go inside
<FORM ...>. In its simplest use, <FORM ...> can be used
without any attributes

HTML (1).pptx

Recommended

Recommended

More Related Content

Similar to HTML (1).pptx

Similar to HTML (1).pptx (20)

Recently uploaded

Recently uploaded (20)

HTML (1).pptx