Html

HTML is used to create web documents including text, images,
formatting and hyperlink to other documents.
HTML stands for Hyper Text Markup Language
HTML is a markup language.
A markup language is a set of markup tags
The tag describe documents contain HTML tags and plain text.
HTML documents are also called web pages
Pages end with “.htm” or “.html”

HTML tags are keywords surrounded by ankle brackets like
<HTML>.
HTML tags normally come in pairs like <HTML></HTML>
The first tag is start tag and second tag is end tag
The end tag is written like start tag with a slash before the tag
name
Start and end tags are also called opening and closing tags

HTLM tags indicate this is an HTML document:
<html> < /html>
Each page has 2 parts:
Head – holds information like the page title , author name, etc. this
section includes the following tags:<title>, <meta>, <base>, <script>,
<style>
<head> </head>
Body – holds the visible text and images , videos
<body> </body>

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
This is what is displayed.
</BODY>
</HTML>

Starting with the tag <html>...</html>
Everything about the web
page should be enclosed
here
<html>
.......
</html>

Inside the <html></html> tag.
Each web page has a head part described in <head></head> tag:
<html>
<head>
<title> CGS 2100 </title>
</head>
</html>
The title of the web
page should be put
here

Inside the <html></html> tag
Each web page has a body part described in <body></body> tag:
<html>
<head>
<title> CGS 2100 </title>
</head>
<body>
This is a sample HTML file.
</body>
</html>
The content of
the whole web
page should be
put here

HEADER Tags Web Browser will Display
<H1>Hello World</H1> Hello World

The physical style tags are those give some control over the
physical appearance of the text.
The Physical Style Tags and Examples
Tags
Example of the display
of the tags
The Bold Tag <B> Hi World
The Italic Tag <I> Hi World
The Underscore Tag <U> Hi World
The Big Tag <Big> Hi World
The Fixed Width (Tele-Type) Tag
<TT>
Hi World
The Small Tag <Small> Hi World
The Strike Through Tag <Strike>
This tag is used to indicate changes
Hi World
in the original document.
The Subscript Tag <Sub>
The i-th variable in a
sequence of x's is Xi.
The Superscript Tag <Sup> X times X is X 2

A Table of Values for the Font Size Attribute
HTML Source for Fonts Sizes 1-7 Display of Resulting HTML Document
<Font Size="1">Size 1</Font> Size 1

Ordered list: used to display information in a numeric order. The
syntax for creating an ordered list is:
<ol > e.g. <ol >
<li>item1 </li> <li> Name: Your name </li>
<li>item2 </li> <li> Section: ### </li>
… <li> Instructor: Yuping </li>
</ol> </ol>
Result:

Unordered list: list items are not listed in a particular
order. The syntax is:
<ul > e.g. <ul>
<li>item1 </li> <li> Name: Your name </li>
<li>item2 </li> <li> Section: ### </li>
… <li> Instructor: Yuping </li>
</ul> </ul>

Nesting List: You can nest lists by inserting a UL, OL, etc., inside
a list item (LI).
Example
<UL TYPE = “square”>
<OL TYPE=“i” START=“3”>
<LI> List item …</LI>
</OL>
</LI>
</UL>
OUTPUT

Link to another location or file
Syntax:
<a href= “http://www.espesolutions.com”>
</a>
Starting
Tag
Content displayed on
the page
Attribute of the tag: the address of
the hyperlink
Ending tag
Result:

Link to web site
<a href= “http://www.google.com”> Link to UCF </a>
Link to document
<a href=“http://www.eecs.ucf.edu/images/building.jpg/”>
</a>
Email link
<a href= “mailto:name@domain.com”> Link to email
</a>

Tables are defined with the <table> tag.
A table is divided into rows with the <tr> tag.
(tr stands for table row)
A row is divided into data cells with the <td> tag. (td stands for table data)
A row can also be divided into headings with the <th> tag.
(th stands for table heading)
The <td> elements are the data containers in the table.
The <td> elements can contain all sorts of HTML elements like text, images,
lists, other tables, etc.
The width of a table can be defined using CSS.

<table border=“1”> OUTPUT:
<tr>
<th> Column 1 header </th>
<th> Column 2 header </th>
</tr>
<tr>
<td> Row1, Col1 </td>
</tr>
<tr>
</tr>
</table>

BGColor: Some browsers support background colors in a table.
Width: you can specify the table width as an absolute number
of pixels or a percentage of the document width. You can set
the width for the table cells as well.
Border: You can choose a numerical value for the border
width, which specifies the border in pixels.
CellSpacing: Cell Spacing represents the space between cells
and is specified in pixels.

CellPadding: Cell Padding is the space between the cell border
and the cell contents and is specified in pixels.
Align: tables can have left, right, or center alignment.
Background: Set image in table background.
BorderColor,BorderColor dark.

Colspan: Specifies how many cell columns of the table this
cell should span.
Rowspan: Specifies how many cell rows of the table this
cell should span.
Align: cell data can have left, right, or center alignment.
Valign: cell data can have top, middle, or bottom alignment.
Width: you can specify the width as an absolute number of
pixels or a percentage of the document width.
Height: You can specify the height as an absolute number of
pixels or a percentage of the document height.

<TABLE BORDER=1 width=50%>
<CAPTION> <h1>Spare Parts <h1> </Caption>
<TR><TH>Stock Number</TH><TH>Description</TH><TH>List Price</TH></TR>
<TR><TD>bgcolor=red>3476-AB</TD><TD>76mm Socket</TD><TD>45.00</TD></TR>
<TR><TD >3478-AB</TD><TD><font color=blue>78mm Socket</font>
</TD><TD>47.50</TD></TR>
<TR><TD>3480-AB</TD><TD>80mm Socket</TD><TD>50.00</TD></TR>
</TABLE>

<BODY attributename="attributevalue">
Deprecated attributes (but still used)
• BACKGROUND=“Sunset.jpg” (can be tiled)
• BGPROPERTIES=“fixed|scroll”
• BGCOLOR=color
• TEXT=color
• LINK=color (unvisited links)
• VLINK=color (visited links)
• ALINK=color (when selected)
Margins:
leftmargin=0 topmargin=0 marginwidth=0 marginheight=0

HTML identifies a color in one of two ways:
by the color’s name
• red, maroon, green, black, blue, purple
by the color values
• To have more control and more choices, specify colors
using color values.

Any color can be a combination of
three primary colors: red, green,
and blue.
By varying the intensity of each
primary color, you can create
almost any color.
Yellow, magenta, cyan, and white are
produced by adding the three primary colors.

Each color is represented by a triplet of numbers, called an
RGB triplet, based on the strength of its Red, Green, and
Blue.
rgb (red, green, blue)
where red, green, blue are the intensity values of the red,
green, and blue components.
The intensity values range from 0 (absence of color) to 255
(highest intensity).
2553 (or more than 16.7 million) colors can be defined.

Color values can also be entered as hexadecimals in the form:
#RedGreenBlue
A hexadecimal is a number based on base-16
• hexadecimals include six extra characters: A (for 10), B (for
11), C (for 12), D (for 13), E (for 14), and F (for 15).
• 16 is expressed as “#10”, 17 as “#11”, 38 as “#26”, 165 as
“#A5”, and 255 as “FF” in hexadecimal format.

<html>
<head>
</head>
<body bgcolor="yellow">
<h1>body background color is yellow</h1>
</body></html>

<html> <head></head>
<body bgcolor="yellow">
<h1>body background color is yellow</h1>
<h2><font color=red>Font color is red</font></h2>
</body></html>

• HTML Forms are used to select different kinds of user input.
• HTML forms are used to pass data to a server.
• An HTML form can contain input elements like text fields,
checkboxes, radio-buttons, submit buttons and more. A form can also
contain select lists, textarea, fieldset, legend, and label elements.
• Syntax:
<form>
.input elements
.</form>

The most important form element is the <input> element.
The <input> element is used to select user information.
An <input> element can vary in many ways, depending on the
type attribute.
An <input> element can be of type text field, checkbox,
password, radio button, submit button, and more.

Defines one line input field where user can enter text.
Syntax:
<form>
First name: <input type="text“ name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
Output:
First name:
Last name:

Password defines a password field.
<input type=“password”>
The text entered in the textfield will view as *******.
Syntax:
Password:<input type =“password” name=“ password”>
OUTPUT:
Password: *********

Radio buttons let a user select ONLY ONE of a limited number of
choices.
<input type="radio"> defines a radio button.
Syntax:
<form>
<input type="radio" name=“gender" value="male">Male<br>
<input type="radio" name=“gender" value="female">Female
</form>
Output: Male
Female

Checkboxes let a user select ZERO or MORE options of a limited number of
choices.
<input type="checkbox"> defines a checkbox.
Syntax:
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
Output:
I have a bike
I have a bike

A submit button is used to send form data to a server.
The data is sent to the page specified in the form's action attribute. T
The file defined in the action attribute usually does something with the received
input.
<input type="submit"> defines a submit button.
 TYPE: submit.
 NAME: value used by the CGI (common gateway interface)script for processing.
 VALUE: determines the text label on the button, usually Submit Query.
CGI: External program use standard input and output for data exchange.

Syntax:
<form name="input" action="demo" method="get">
Username: <input type="text" name="user">
Password:<input type=“password” name=“pass”>
<input type="submit“ value=“submit” >
</form>
Output:

It allows the surfer to clear all the input in the form.
For reset give <input type=“reset”>
The browser display reset button.

Let a user select one or more choices from limited number of options.
The <select> element is used to create a drop-down list.
The <option>tags inside the <select> element define the available options in the
list.
Syntax:
<html>
<body>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value=“fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</body>
</html>

To select multiple options.
<SELECT NAME="ComputerType" size=5 multiple>
<OPTION value="IBM" > IBM</OPTION>
<OPTION value="INTEL"> INTEL</OPTION>
<OPTION value=" Apple"> Apple</OPTION>
<OPTION value="Compaq" SELECTED> Compaq</OPTION>
<OPTION value=" other"> Other</OPTION>
</SELECT>

The <textarea> tag defines a multi-line text input control.
The size of a text area can be specified by the cols and rows
attributes, or even better; through CSS' height and width
properties.
<syntax:
<html>
<body>
<textarea rows="10" cols="30">
</textarea>
</body>
</html>
output

It is a way to divide the content from the layout on web pages.
CSS gives style to every content in your page.
How it works:
A style is a definition of fonts ,colors, style, height, width,
margin etc.
Each style has a unique name: a selector.
The selectors and their styles are defined in one place.

In your HTML contents you simply refer to the selectors
whenever you want to activate a certain style.
There are three types of selectors:
Tag(HTML) selectors - Used to define styles associated to
HTML tags. (A way to redefine the look of tags)
Class selectors - Used to define styles that can be used without
redefining plain HTML tags.
ID selectors - Used to define styles relating to objects with a
unique ID (most often layers)

Define the look of your pages in one place rather than repeating yourself over and over again
throughout your site. (Ever get tired of defining colors and fonts each time you start a new cell in a
table? Those days are over with CSS!)
Easily change the look of your pages even after they're created. Since the styles are defined in one
place you can change the look of the entire site at once. (Ever get tired of replacing tags throughout
your site when you want to change the look of a certain element? Those days are over with CSS!)
Define font sizes and similar attributes with the same accuracy as you have with a word processor -
not being limited to just the seven different font sizes defined in HTML.
Position the content of your pages with pixel precision.
Redefine entire HTML tags. Say for example, if you wanted the bold tag to be red using a special
font - this can be done easily with CSS.
Define customized styles for links - such as getting rid of the underline.
Define layers that can be positioned on top of each other (often used for menus that pop up).

Html

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Html (20)

Html