Scribd
Upload
73 views

Intro HTML

HTML was created by Tim Berners-Lee in 1991 to define the structure and layout of web pages. It uses tags to mark up elements like headings, paragraphs, links, images, and lists. Some common tags include <h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, and <ol> and <ul> for ordered and unordered lists. HTML pages have a basic structure including <html>, <head>, <title>, and <body> tags.

Uploaded by

Joy De los Santos
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
73 views

Intro HTML

HTML was created by Tim Berners-Lee in 1991 to define the structure and layout of web pages. It uses tags to mark up elements like headings, paragraphs, links, images, and lists. Some common tags include <h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, and <ol> and <ul> for ordered and unordered lists. HTML pages have a basic structure including <html>, <head>, <title>, and <body> tags.

Uploaded by

Joy De los Santos
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 75

HTML – OVERVIEW

What is HTML?

• HTML was created by Berners-Lee in late 1991


but "HTML 2.0" was the first standard HTML
specification which was published in 1995.
Currently we are having HTML-5 version and
this version was published in 2012.
HTML …..

•HTML, otherwise known as HyperText


Markup Language, is the language used to
create Web pages
•Using HTML, you can create a Web page
with text, graphics, sound, and video
• Hypertext refers to the way in which Web
pages (HTML documents) are linked
together. Thus, the link available on a
webpage is called Hypertext.
• As its name suggests, HTML is a Markup
Language which means you use HTML to
simply "mark-up" a text document with tags
that tell a Web browser how to structure it to
display.
• Originally, HTML was developed with the
intent of defining the structure of
documents like headings, paragraphs, lists,
and so forth to facilitate the sharing of
scientific information between researchers.
Now, HTML is being widely used to format
web pages with the help of different tags
available in HTML language.
Tags
• The essence of HTML programming is tags
• A tag is a keyword enclosed by angle
brackets ( Example: <I> )
• There are opening and closing tags for
many but not all tags; The affected text is
between the two tags.
More Tags...
• The opening and closing tags use the same
command except the closing tag contains
and additional forward slash /
• For example, the expression <B> Warning
</B> would cause the word ‘Warning’ to
appear in bold face on a Web page
Nested Tags
• Whenever you have HTML tags within
other HTML tags, you must close the
nearest tag first
• Example:
<H1> <I> The Nation </I> </H1>
Structure of a Web Page
• All Web pages share a <!DOCTYPE HTML>
<HEAD>
common structure <TITLE> Example </TITLE>
• All Web pages should </HEAD>
<BODY>
contain a pair of This is where you would include
<HTML>, <HEAD>, the text and images on your Web
page.
<TITLE>, and
</BODY>
<BODY> tags </HTML>
Comment Statements
• Comment statements are notes in the HTML
code that explain the important features of
the code
• The comments do not appear on the Web
page itself but are a useful reference to the
author of the page and other programmers
• To create a comment statement use the
<!-- …. --> tags
Some basic text formatting styles:

Tag Result

<I> Italics </I> Italics


<B> Bold </B> Bold
<U> Underline</U> Underline
<PRE> Preformatted Text </PRE> Preformatted Text
<STRONG> Strong </STRONG> Strong
<ADDRESS> Address </ADDRESS> Address
<CITE> Citations </CITE> Citations
<CODE> Source Code </CODE> Source Code
Preserve Formatting
• Sometimes, you want your text to follow the exact
format of how it is written in the HTML
document. In these cases, you can use the
preformatted tag <pre> .

• Any text between the opening <pre> tag and the


closing </pre> tag will preserve the formatting of
the source document.
HTML – BASIC TAGS
1. Heading Tags
• Any document starts with a heading. You
can use different sizes for your headings.
HTML also has six levels of headings,
which use the elements <h1>, <h2>, <h3>,
<h4>, <h5>, and <h6>. While displaying
any heading, browser adds one line before
and one line after that heading.
2. Paragraph Tag

• The <p> tag offers a way to structure your


text into different paragraphs. Each
paragraph of text should go in between an
opening <p> and a closing </p> tag.
3. Line Break Tag
• Whenever you use the <br> element,
anything following it starts from the next
line. This tag is an example of an empty
element, where you do not need opening
and closing tags, as there is nothing to go in
between them
4. Centering Content

• You can use <center> tag to put any


content in the center of the page or any
table cell.
5. Horizontal Rule
• Horizontal rules are used to visually break-up
sections of a document. The <hr> tag creates a line
from the current position in the document to the
right margin and breaks the line accordingly.

• Again <hr> tag is an example of the empty element,


where you do not need opening and closing tags, as
there is nothing to go in between them.
Horizontal Rule …….
Horizontal Rule Attributes:
NOSHADE -- A solid line with no shading
WIDTH="xx%/xx" -- Controls the width of the line. You
may specify either percentage of the width of a page or actual
pixel length.
SIZE="xx" -- Controls the height of the line.
ALIGN="left/center/right" -- This allows the line to be
aligned to the left, right, or center of the page
HTML – ATTRIBUTES
An attribute is used to define the characteristics of an HTML
element and is placed inside the element's opening tag. All
attributes are made up of two parts: a name and a value:

•The name is the property you want to set. For example, the
paragraph <p> carries an attribute whose name is align, which you
can use to indicate the alignment of paragraph on the page.
•The value is what you want the value of the property to be set and
always put within quotations. The below example shows three
possible values of align attribute: left, center and right.
Core Attributes
The four core attributes that can be used on
the majority of HTML elements (although not
all) are:
•Id
•Title
•Class
•Style
The title Attribute
•The title attribute gives a suggested title for the element. They
syntax for the title attribute is similar as explained for id attribute:
•The behavior of this attribute will depend upon the element that
carries it, although it is often displayed as a tooltip when cursor
comes over the element or while the element is loading.
This will produce the following result:
Changing the Font
• The expression <FONT FACE = “fontname”>
… </FONT> can be used to change the font of
the enclosed text
• To change the size of text use the
expression <FONT SIZE=n> …. </FONT>
where n is a number between 1 and 7
Changing the Font
• To change the color, use <FONT
COLOR=“red”>…. </FONT>; The color
can also be defined using hexadecimal
representation ( Example: #ffffff )
• These attributes can be combined to change the
font, size, and color of the text all at once; For
example, <FONT SIZE=4 FACE=“Courier”
COLOR=“red”> …. </FONT>
Page Formatting

• To define the background color, use the


BGCOLOR attribute in the <BODY> tag
• To define the text color, use the TEXT
attribute in the <BODY> tag
Example
<HTML>
<HEAD>
<TITLE> Example </TITLE>
</HEAD>
<BODY BGCOLOR=“black” TEXT=“white”>
<FONT SIZE=5>
<p> This is where you would include the text and images on your Web
page. </p>
</BODY>
</HTML>
Inserting Images
• Type <IMG SRC = “image.ext”>, where
image.ext indicates the location of the image
file
• The WIDTH=n and HEIGHT=n attributes
can be used to adjust the size of an image
• The attribute BORDER=n can be used to add
a border n pixels thick around the image
Title and Alternate Attribute
• Some browsers don’t support images. In
this case, the ALT attribute can be used to
create text that appears instead of the
image.
• Example:
<IMG SRC=“satellite.jpg” ALT = “Picture
of satellite”>
Links
• A link lets you move from one page to
another, play movies and sound, send email,
download files, and more….
• To create a link type
<A HREF=“page.html”> label </A>
Anatomy of a Link
<A HREF=“page.html”> label </A>

• In the above link, “page.html” is the


destination. The destination specifies the
address of the Web page or file the user will
access when he/she clicks on the link.
• The label is the text that will appear
underlined or highlighted on the page
Example: Links
• To create a link to CNN, I would type:
<A HREF=“http://www.cnn.com”>CNN</A>

• To create a link to MIT, I would type:


<A HREF=“http://www.mit.edu”>MIT</A>
Changing the Color of Links
• The LINK, VLINK, and ALINK attributes can
be inserted in the <BODY> tag to define the
color of a link
– LINK defines the color of links that have not been
visited
– VLINK defines the color of links that have already
been visited
– ALINK defines the color of a link when a user
clicks on it
Anchors
• Anchors enable a user to jump to a specific
place on a Web site
• Two steps are necessary to create an
anchor. First you must create the anchor
itself. Then you must create a link to the
anchor from another point in the document.
Anchors
• To create the anchor itself, type <A
NAME=“anchor name”>label</A> at the
point in the Web page where you want the
user to jump to
• To create the link, type <A
HREF=“#anchor name”>label</A> at the
point in the text where you want the link to
appear
Example: Anchor

<A HREF="#chap2">Chapter Two</A><BR>


Link

<A NAME="chap2">Chapter 2 </A> Anchor


Lists -- Definition Lists
Definition Lists:
<DL>
<DT>List Name One
<DD>This is where information about List Name One would go</DD>
</DT>

<DT>List Name Two


<DD>This is where information about List Name Two would go</DD>
</DT>
</DL>
Ordered Lists
• Ordered lists are a list Here’s how it would
of numbered items. look on the Web:
• To create an ordered
list, type:
<OL>
<LI> This is step one.
<LI> This is step two.
<LI> This is step three.
</OL>
More Ordered Lists….
• The TYPE=x attribute allows you to change
the the kind of symbol that appears in the
list.
– A is for capital letters
– a is for lowercase letters
– I is for capital roman numerals
– i is for lowercase roman numerals
Unordered Lists
• An unordered list is a Here’s how it would
list of bulleted items look on the Web:
• To create an unordered
list, type:
<UL>
<LI> First item in list
<LI> Second item in list
<LI> Third item in list
</UL>
More Unordered Lists...
• The TYPE=shape attribute allows you to
change the type of bullet that appears
– circle corresponds to an empty round bullet
– square corresponds to a square bullet
– disc corresponds to a solid round bullet; this is
the default value
Forms
 What are forms?
• An HTML form is an area of the document that
allows users to enter information into fields.
• A form may be used to collect personal
information, opinions in polls, user preferences
and other kinds of information.
Forms
• There are two basic components of a Web
form: the shell, the part that the user fills
out, and the script which processes the
information
• HTML tags are used to create the form
shell. Using HTML you can create text
boxes, radio buttons, checkboxes, drop-
down menus, and more...
Example: Form
Text Box

Drop-down Menu
Radio Buttons
Checkboxes

Text Area

Reset Button
Submit
The Form Shell
• A form shell has three important parts:
– the <FORM> tag, which includes the address
of the script which will process the form
– the form elements, like text boxes and radio
buttons
– the submit button which triggers the script to
send the entered information to the server
Creating the Shell
• To create a form shell, type <FORM
METHOD=POST ACTION=“script_url”>
where “script_url” is the address of the
script
• Create the form elements
• End with a closing </FORM> tag
Creating Text Boxes
• To create a text box, type <INPUT
TYPE=“text” NAME=“name”
VALUE=“value” SIZE=n
MAXLENGTH=n>
• The NAME, VALUE, SIZE, and
MAXLENGTH attributes are optional
Text Box Attributes
• The NAME attribute is used to identify the text
box to the processing script
• The VALUE attribute is used to specify the text
that will initially appear in the text box
• The SIZE attribute is used to define the size of
the box in characters
• The MAXLENGTH attribute is used to define
the maximum number of characters that can be
typed in the box
Example: Text Box
First Name: <INPUT • Here’s how it would
TYPE="text"
NAME="FirstName" look on the Web:
VALUE="First Name"
SIZE=20>
<BR><BR>

Last Name: <INPUT


TYPE="text"
NAME="LastName"
VALUE="Last Name"
SIZE=20>
<BR><BR>
Creating Larger Text Areas
• To create larger text areas, type
<TEXTAREA NAME=“name” ROWS=n1
COLS=n2> Default Text </TEXTAREA>,
where n1 is the height of the text box in
rows and n2 is the width of the text box in
characters
Example: Text Area
<B>Comments?</B>
<BR>
<TEXTAREA NAME="Comments" ROWS=10
COLS=50 >
</TEXTAREA>
Creating a Submit Button
• To create a submit button, type <INPUT
TYPE=“submit”>
• If you would like the button to say
something other than submit, use the
VALUE attribute
• For example, <INPUT TYPE=“submit”
VALUE=“Buy Now!”> would create a
button that says “Buy Now!”
Creating a Reset Button
• To create a reset button, type <INPUT
TYPE=“reset”>
• The VALUE attribute can be used in the
same way to change the text that appears on
the button
Creating Radio Buttons
• To create a radio button, type <INPUT
TYPE=“radio” NAME=“name”
VALUE=“data”> where “data” is the text
that will be sent to the server if the button is
checked.
Example: Radio Buttons
<B> Size: </B>
<INPUT TYPE="radio" NAME="Size"
VALUE="Large">Large
<INPUT TYPE="radio" NAME="Size"
VALUE="Medium">Medium
<INPUT TYPE="radio" NAME="Size"
VALUE="Small">Small
Creating Checkboxes
• To create a checkbox, type <INPUT
TYPE=“checkbox” NAME=“name”
VALUE=“value”>Label
• If you give a group of radio buttons or
checkboxes the same name, the user will
only be able to select one button or box at a
time
Example: Checkboxes
<B> Color: </B>
<INPUT TYPE="checkbox" NAME="Color"
VALUE="Red">Red
<INPUT TYPE="checkbox" NAME="Color"

VALUE="Navy">Navy
<INPUT TYPE="checkbox" NAME="Color"
VALUE="Black">Black
Creating Drop-down Menus
• To create a drop-down menu, type <SELECT
NAME=“name” SIZE=n MULTIPLE>
• Then type <OPTION VALUE= “value”>Label
• In this case the SIZE attribute specifies the
height of the menu in lines and MULTIPLE
allows users to select more than one menu
option
Example: Drop-down Menu
<B>WHICH IS FAVOURITE FRUIT:</B>
<SELECT>
<OPTION VALUE="MANGOES">MANGOES
<OPTION VALUE="PAPAYA">PAPAYA
<OPTION VALUE="GUAVA">GUAVA
<OPTION VALUE="BANANA"> BANANA
<OPTION VALUE="PINEAPPLE">PINEAPPLE
</SELECT>
Tables
• Tables can be used to display rows and
columns of data, create multi-column text,
captions for images, and sidebars
• The <TABLE> tag is used to create a table;
the <TR> tag defines the beginning of a
row while the <TD> tag defines the
beginning of a cell
Adding a Border
• The BORDER=n attribute allows you to
add a border n pixels thick around the table
• To make a solid border color, use the
BORDERCOLOR=“color” attribute
Creating Simple Table
<TABLE BORDER=10> • Here’s how it would
<TR>
<TD>One</TD>
look on the Web:
<TD>Two</TD>
</TR>
<TR>
<TD>Three</TD>
<TD>Four</TD>
</TR>
</TABLE>
Adjusting the Width
• When a Web browser displays a table, it
often adds extra space. To eliminate this
space use the WIDTH =n attribute in the
<TABLE> and <TD> tags
• Keep in mind - a cell cannot be smaller than
its contents, and if you make a table wider
than the browser window, users will not be
able to see parts of it.
Centering a Table
• There are two ways to center a table
– Type <TABLE ALIGN=CENTER>
– Enclose the <TABLE> tags in opening and
closing <CENTER> tags
Wrapping Text around a Table
• It is possible to wrap text around a table. This
technique is often used to keep images and
captions together within an article.
• To wrap text around a table, type <TABLE
ALIGN = LEFT> to align the table to the left
while the text flows to the right.
• Create the table using the <TR>, <TD>, and
</TABLE> tags as you normally would
Aligning Cell Content
• By default, a cell’s content are aligned
horizontally to the left and and vertically in the
middle.
• Use VALIGN=direction to change the vertical
alignment, where “direction” is top, middle,
bottom, or baseline
• Use ALIGN=direction to change the horizontal
alignment where “direction” is left, center, or right
Controlling Cell Spacing
• Cell spacing is the space between cells
while cell padding is the space around the
contents of a cell
• To control both types of spacing, use the
CELLSPACING =n and
CELLPADDING=n attributes in the
<TABLE> tag
Nesting Tables
• Create the inner table
• Create the outer table and determine which cell of
the outer table will hold the inner table
• Test both tables separately to make sure they work
• Copy the inner table into the cell of the outer table
• Don’t nest too many tables. If you find yourself
doing that, find an easier way to lay out your Web
page
Changing a Cell’s Color
• To change a cell’s color, add the
BGCOLOR=“color” attribute to the <TD>
tag
• Example:
<TD BGCOLOR=“blue”>

You might also like