HTML

What is HTML?

HTML stands for Hypertext Markup Language. This markup language is used to create web documents. A web document is viewed in a web browser, like the one you are using to read this document.

HTML editors

There are so many software packages available to develop HTML. The software packages can be grouped into two main categories:

1. text-based (or code-based) editors

2. WYSIWYG (what you see is what you get) editors

Text-based (or code-based) editors

You can create web pages with a basic text editor like Windows Notepad.

In Windows, Notepad can be started from the Start Menu:

1. Select: Programs | Accessories | Notepad

2. Type notepad.exe or just notepad in the Run command from the Start Menu:

Macromedia Homesite is a popular text-based HTML editor. The editor provides many HTML-specific options that are not available in the Windows Notepad

WYSIWYG editors

Because WYSIWYG (pronounced wuzzywig or wizzywig) These editors allows you to directly work in the "design" or "preview" view instead of the code view.

There are several popular WYSIWYG editors available:

1. Macromedia Dreamweaver

2. Microsoft FrontPage

3. Adobe GoLive

Basic structure of an HTML document

An HTML document has two* main parts:

1. head. The head element contains title and meta data of a web document.

2. body. The body element contains the information that you want to display on a web page.

In a web page, the first tag (specifically, <html>) indicates the markup language that is being used for the document. The <head> tag contains information about the web page. Lastly, the content appears in the <body> tag. The following illustration provides a summary.

Summary of Basic HTML Tags

Understanding elements

In HTML, an element refers to two different things:

1. element of structure of a document (for example, paragraph, web page title, etc.).

2. element in the sense of a tag (for example, <p>, <title>)

Understanding attributes

In HTML, elements (or tags) have attributes or properties. As an HTML writer, attributes allow you to add extra instruction to your tags.

For example, for the align attribute, possible values include, left, center, justify and right.

Character tags: logical and physical

A tag that is applied to an individual character is known as a character tag. A character tag can be grouped into two categories: physical and logical.

Physical styles

Listing 1 common physical character tags
Tag	Description	Renders as
<b>	bold	displays text as bold
<big>	big	displays text in a big font
<i>	italics	displays text as italic
<s> or <strike> *	strike	displays text with a line through it
<small>	small	displays text in a small font
<sub>	subscript	displays the text as subscript — text that displays below the baseline of the text
<sup>	superscript	displays the text as superscript — text that has baseline above the baseline of the rest of the text
<tt>	teletype	displays the text with fixed-width font
<u>	underline	underlines the text
Listing 2 examples of common physical character tags
HTML code		Output
This is <b>bold</b>		This is bold
This is <big>big font</big>		This is big font
This is <i>italic</i>		This is italic
Was <s>$50</s>; now $40		Was ~~$50~~; now $40
This is <small>small</small>		This is small
H<sub>2</sub>O		H₂O
May 5<sup>th</sup> 2005		May 5^th 2005
<tt>fixed-width font</tt>		fixed-width font
This is <u>underlined</u>		This is underlined

Creating headings

There are six headings in HTML. Each heading can be created with an HTML header tag, one header tag for each level of heading. Header tags are range from <h1> to <h6>, where <h1> is the largest and most prominent and <h6> is the smallest. To use a header tag, use the following syntax:

<hn>Some text</hn>
where n is a number between 1 and 6.

Figure 1 shows how to use all of the six headings as an HTML code on the left and the output from a browser is shown on the right.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

HTML List Item Code:

<body>

<ul>

</ul>

</body>

HTML Unordered List Types:

type="square"	type="disc"	type="circle"
Milk Toilet Paper Cereal Bread	Milk Toilet Paper Cereal Bread	Milk Toilet Paper Cereal Bread

HTML Numbered/Ordered List:

<h4 align="center">Goals</h4>

<ol>

<li>Get Money</li>

</ol>

HTML Code:

Line breaks

To add a line break in a web page, you can use the <br> tag. Typing a <br> tag in your HTML code is similar to pressing the ENTER or RETURN key in a word processor.

Line breaks<br> in HTML

Controlling the font size with the <font> tag

This page explains how to use the <font> tag to control the font size.

To control font size, use a font size value of 1 - 7, where font 1 is the smallest and 7 is the largest. Listing 1 shows the HTML code and the corresponding 7 different font sizes.

Listing 1 HTML code and different font sizes
HTML code	Output
<font size="1">size 1</font>	size 1
<font size="2">size 2</font>	size 2
<font size="3">size 3</font>	size 3
<font size="4">size 4</font>	size 4
<font size="5">size 5</font>	size 5
<font size="6">size 6</font>	size 6
<font size="7">size 7</font>	size 7

Changing the font color with the <font> tag

Listing 2 Changing the font color
Color Name		Color value		Output
	<font color="red">Red</font>		<font color="FF0000">Red</font>		Red
	<font color="green">Green</font>		<font color="00FF00">Green</font>		Green
	<font color="blue">Blue</font>		<font color="0000FF">Blue</font>		Blue

Changing the font face with the <font> tag

<font face="verdana">this text is displayed using the verdana font face.</font>

Combining <font> tag attributes

When you have to control size, color or face of a font at the same time, you could use separate font tags as:

Specifying individual attribute with separate <font> tags is insufficient as the browser has to process these extra tags. Additionally, it is confusing and long. Instead of individually specifying the size, color, or face of a font, you can combine all three into one <font> tag:

<font size="5" color="yellow" face="arial">Some text</font>.

That outputs:

Some text

Horizontal rules

To break up an HTML document into separate sections, you can insert a horizontal line (rule). A horizontal rule is inserted by the <hr> tag. The <hr> tag is one-sided, meaning it does not require a closing tag. Let's look at an example:

Inserting Horizontal lines

As several sections are added to a web page, they can be separated into visually distinct regions by a horizontal rule. <hr> attributes

Horizontal rule of size 12:	<hr size="12" />
Horizontal rule of size 12 and width 20%:	<hr size="12" width="60%" />
Horizontal rule of size 12, width 300 pixels, and aligned left:	<hr size="12" width="60%" align="left" />
Horizontal rule of size 12, width 300 pixels, and aligned right:	<hr size="12" width="60%" align="right" />
Horizontal rule of size 12, width 300 pixels, and aligned justify:	<hr size="12" width="60%" align="justify" />
Horizontal rule of size 12, width 300 pixels, and no shading:	<hr size="12" width="60%" noshade="noshade" />

Adding hyperlinks

To make other documents easily accessible, a hyperlink is used. A hyperlink is a part of the web page that user clicks on to view the destination document.

A link is created with an <a> tag. The "a" in <a> stands for anchor thus it is called an "anchor tag" or simply link tag. An anchor tag is a two-sided tag and uses a href attribute to specify the destination of the link. The href attribute stands for Hypertext Reference.

Inserting graphics

There are three popular formats that HTML supports: JPEG, PNG, and GIF. Any image editing software should provide you with an option to save your images with one of those three file formats.

To place an image, use the <img> tag with the src attribute. For example,

ALT property

To add alternative text to your image, simply add the ALT property to the image tag. For example,

Controlling image size

The following example shows how to add width and height for a particular image,

Defining a table structure in HTML

To define a table, we start with the <table> tag. Next for each row, use the <tr> tag. The "tr" in <tr> tag stands for table row. For each column in each row, use the <td> tag, the "td" in <td> stands for table data. Let's say we want to create the following table :

Col 1

Col 2

To create the top table, use the following code :

Creating web page forms

To create a form use the <form> tag and use </form> tag to end the form. (Click here to learn more about creating a <form> tag.) Between the <form> and </form> tags, you specify the form elements (see table 1). For details about a creating a specific element, simply follow the link for that element under "Field type" below.

Table 1 common form elements
Field type	HTML tag to use	Description	Appearance in browser
Input (text) box	<input type="text">	Single line text box for users to enter single line of data
Password box	<input type="password">	Single line text box that hides the text being typed.
Radio Button	<input type="radio">	Allows the user to select a single option from a predefined list	Checked Unchecked
Check Box	<input type="checkbox">	Allow the user to select zero, one or more options	Checked Unchecked
Selection list	<select> <option>Option 1</option> <option>Option 2</option> </select>	Drop-down list box - displaying a long list of options


Text area	<textarea rows="5" cols="15"></textarea>	A (scrollable) text box used for extended entries that might include several lines of text
Submit button	<input type="submit">	A submit button submits (sends) the form to the web server for processing.


Reset button	<input type="reset">	Clears the data user has entered into the form.

OM SAI COMPUTER INSTITUTE

Pages

HTML

HTML

Text-based (or code-based) editors

WYSIWYG editors

Summary of Basic HTML Tags

Understanding elements

Understanding attributes

Physical styles

Combining <font> tag attributes

As several sections are added to a web page, they can be separated into visually distinct regions by a horizontal rule. <hr> attributes

No comments:

Post a Comment