HTML: An Introduction to Web Page Programming PDF

# HTML: An Introduction to Web Page Programming ## Introduction to HTML * With HTML you can create your own Web site. * HTML stands for Hyper Text Markup Language. * HTML is not a programming language, it is a Markup Language. * A markup language is a set of markup tags. * HTML uses markup tags to describe web pages. * HTML is not case sensitive language. * HTML documents contain HTML tags and plain text. ## HTML Elements and Tags * A tag is always enclosed in angle bracket <> like `<HTML>`. * HTML tags normally come in pairs like `<HTML>` and `</HTML>` i.e. * Start tag = `<HTML>` * End tag = `</HTML>` * Start and end tags are also called opening tags and closing tags ## How to Start * Write html code in notepad. * Save the file with (.Html)/(.Htm) extension. * View the page in any web browser viz. INTERNET EXPLORER, NETSCAPE NAVIGATOR etc. * The purpose of a web browser (like internet explorer or firefox) is to read html documents and display them as web pages. ## Code With HTML ```html <HTML> <HEAD> <TITLE> MY FIRST PAGE </TITLE> </HEAD> <BODY> GLOBAL INFORMATION CHANNEL </BODY> </HTML> ``` ## Explain these tags * `<HTML>` - Describe HTML web page that is to be viewed by a web browser. * `<HEAD>` - This defines the header section of the page. * `<TITLE>` - This shows a caption in the title bar of the page. * `<BODY>` - This tag show contents of the web page will be displayed. ## Types of HTML Tags There are two different types of tags:-> ### Container Element:-> Container Tags contains start tag & end tag i.e. `<HTML>... </HTML>` ### Empty Element:-> Empty Tags contains start tag i.e. `<BR>` ## Text Formatting Tags ### Heading Element:-> * There are six heading elements (`<H1>`, `<H2>`,`<H3>`, `<H4>`, `<H5>`,`<H6>`). * All the six heading elements are container tag and requires a closing tag. * `<h1>` will print the largest heading * `<h6>` will print the smallest heading ## Heading Tag Code ```html <html> <title>heading</title> <body> <h1> GLOBAL INFO CHANNEL</h1> <h2> GLOBAL INFO CHANNEL</h2> <h3> GLOBAL INFO CHANNEL</h3> <h4> GLOBAL INFO CHANNEL</h4> <h5> GLOBAL INFO CHANNEL</h5> <h6> GLOBAL INFO CHANNEL</h6> </body> </html> ``` ## HTML Paragraph Tag * HTML documents are divided into paragraphs. * Paragraphs are defined with the `<p>` tag i.e. * `<p>This is a paragraph</p>` * `<p>This is another paragraph</p>` * `<pre>This text is preformatted</pre>` ## Line Break & Horizontal Line Tag * If you want a line break or a new line without starting a new paragraph Use the `<br>` tag. * Defines a horizontal line use `<hr>`tag. * `<br>` `<hr>` element are empty HTML element i.e. * Global Information Channel `<hr>` * Global Information `<br>` Channel ## Text Formatting Tags * `<b>` Defines bold text * `<big>` Defines big text * `<em>` Defines emphasized text * `<i>` Defines italic text * `<small>` Defines small text * `<strong>` Defines strong text * `<sub>` Defines subscripted text * `<super>` Defines superscripted text * `<ins>` Defines inserted text * `<del>` Defines deleted text * `<tt>` Defines teletype text * `<u>` Defines underline text * `<strike>` Defines strike text ## Text Formatting Code ```html <html> <head></head> <body> <b>This text is Bold</b> <br><em>This text is Emphasized</em> <br><i>This text is Italic</i> <br><small>This text is Small</small> <br>This is<sub> Subscript</sub> and <sup>Superscript</sup> <br><strong>This text is Strong</strong> <br><big>This text is Big</big> <br><u>This text is Underline</u> <br><strike>This text is Strike</strike> <br><tt>This text is Teletype</tt> </body> </html> ``` ## Font Tag * This element is used to format the size, typeface and color of the enclosed text. * The commonly used fonts for web pages are Arial, Comic Sans MS, Lucida Sans Unicode, Arial Black, Courier New, Times New Roman, Arial Narrow, Impact, Verdana. * The size attribute in font tag takes values from 1 to 7. ## Font Tag Code ```html <html> <head><title> fonts</title></head> <body> <br><font color="green" size="7" face="Arial"> GLOBAL INFORMATION CHANNEL </font> <br><font color="green" size="6" face="Comic Sans MS"> GLOBAL INFORMATION CHANNEL </font> <br><font color="green" size="5" face="Lucida Sans Unicode"> GLOBAL INFORMATION CHANNEL </font> <br><font color="green" size="4" face="Courier New"> GLOBAL INFORMATION CHANNEL </font> <br><font color="green" size="3" face="Times New Roman"> GLOBAL INFORMATION CHANNEL </font> <br><font color="green" size="2" face="Arial Black"> GLOBAL INFORMATION CHANNEL </font> <br><font color="green" size="1" face="Impact"> GLOBAL INFORMATION CHANNEL </font> </body> </html> ``` ## Background & Text Color Tag * The attribute `bgcolor` is used for changing the back ground color of the page. `<body bgcolor="Green">` * `text` is use to change the color of the enclosed text. `<body text="White">` ## Text Alignment Tag * It is use to alignment of the text. 1. Left alignment `<align="left">` 2. Right alignment `<align="right">` 3. Center alignment `<align="center">` ## Hyperlink Tag * A hyperlink is a reference (an address) to a resource on the web. * Hyperlinks can point to any resource on the web: an HTML page, an image, a sound file, a movie, etc. * The HTML anchor element `<a>`, is used to define both hyperlinks and anchors. `<a href="url">Link text</a>` * The `href` attribute defines the link address. `<a href="http://www.globalinfochannel/">Visit globalinfochannel!</a>` ## Image Tag * To display an image on a page, you need to use the `src` attribute. * `src` stands for "source". The value of the `src` attribute is the URL of the image you want to display on your page. * It is a empty tag. `<IMG SRC="url">` * `<IMG SRC="picture.gif">` * `<IMG SRC="picture.gif" HEIGHT="30" WIDTH="50">` ## Image attributes - `<img>` tag * `<img>` Defines an image * `<Src>` display an image on a page. Src stands for "source". * `<Alt>` Define "alternate text" for an image * `<Width>` Defines the width of the image * `<Height>` Defines the height of the image * `<Border>` Defines border of the image * `<Hspace>` Horizontal space of the image * `<Vspace>` Vertical space of the image * `<Align>` Align an image within the text * `<background>` Add a background image to an HTML page ## HTML Table Tag | Tag | Description | |---|---| | `<table>` | used to create table | | `<tr>` | table is divided into rows | | `<td>` | each row is divided into data cells | | `<th>` | Headings in a table | | `<Caption>` | caption to the table | | `<colgroup>` | Defines groups of table columns | | `<col>` | Defines the attribute values for one or more columns in a table | | `<thead>` | Defines a table head | | `<tbody>` | Defines a table body | | `<tfoot>` | Defines a table footer | | `<Cellspacing>` | amount of space between table cells. | | `<Cellpadding>` | space around the edges of each cell | | `<Colspan>` | No of column working with will span | | `<rowspan>` | No of rows working with will span | | `<Border>` | attribute takes a number | ## HTML Form * A form is an area that can contain form elements. * Form elements are elements that allow the user to enter information in a form. like text fields, textarea fields, drop-down menus, radio buttons and checkboxes etc * A form is defined with the `<form>` tag. The syntax:- `<form> input elements </form>` ## Form Tags | Tag | Description | |---|---| | `<form>` | Defines a form for user input | | `<input>` | used to create an input field | | `<text>` | Creates a single line text entry field | | `<textarea>` | Defines a text-area (a multi-line text input control) | | `<password>` | Creates a single line text entry field. And the characters entered are shown as asterisks (*) | | `<label>` | Defines a label to a control | | `<option>` | Creates a Radio Button. | | `<select>` | Defines a selectable list (a drop-down box) | | `<button>` | Defines a push button | | `<value>` | attribute of the option element. select or unselect a checkbox | | `<checkbox>` | A drop-down box is a selectable list |

HTML: An Introduction to Web Page Programming PDF

Document Details

Tags

Related

Summary

Full Transcript

Upgrade to continue