Scribd
Upload
66 views

Markup Language (HTML) Is The Predominant: Hypertext

HTML (Hypertext Markup Language) is the standard markup language used to create web pages. HTML elements are the basic building blocks of web pages and include tags like <html> and <body> that define the overall structure of a page. The <head> section contains meta information about the page while the <body> contains the visible content. Common HTML elements in the body include headings, paragraphs, images, and tables.

Uploaded by

Anurag Chahal
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
66 views

Markup Language (HTML) Is The Predominant: Hypertext

HTML (Hypertext Markup Language) is the standard markup language used to create web pages. HTML elements are the basic building blocks of web pages and include tags like <html> and <body> that define the overall structure of a page. The <head> section contains meta information about the page while the <body> contains the visible content. Common HTML elements in the body include headings, paragraphs, images, and tables.

Uploaded by

Anurag Chahal
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 11

HTML

HyperText Markup Language (HTML) is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages. HTML is written in the form of HTML elements consisting of tags, enclosed in angle brackets (like <html>), within the web page content

Basic HTML Document Code Structure


<html> <head> <title>Your Page Title</title> </head> <body> This area will contain everything that will be visible through a web browser, such as text and graphics. All of the information will be HTML coded. For a complete list of HTML codes, tags and examples, see the HTML chart below. </body> </html>

<html> - Begins your HTML document. <head> - Contains information about the page such as the TITLE, META tags for proper Search Engine indexing, STYLE tags, which determine the page layout, and JavaScript coding for special effects. <title> - The TITLE of your page. This will be visible in the title bar of the viewers browser. </title> - Closes the HTML <title> tag. </head> - Closes the HTML <head> tag. <body> - This is where you will begin writing your document and placing your HTML codes. </body> - Closes the HTML <body> tag. </html> - Closes the <html> tag.

Head

The head section of the webpage includes all the stuff that does not show directly on the resulting
page.

The <title> and </title> tags encapsulate the title of your page. The title is what shows in the top of
your browser window when the page is loaded. Right now it should say something like "Basics - Html Tutorial" on top of the window containing this text.

Another thing you will often see in the head section is metatags. Metatags are used for, among
other things, to improve the rankings in search engines.

Quite often the head section contains javascript which is a programming language for more
complex HTML pages.

Finally, more and more pages contain codes for cascading style sheets (CSS).
CSS is a rather new technique for optimizing the layout of major websites.

Headers

There are up to six levels of headers that can be used in your document, h1 through h6. Header 1 is the largest header and they get progressively smaller through header 6. Below are each of the six headers and how they usually appear in relation to one another.
<h1>This is a header 1 tag</h1>

This is a header 1 tag


<h2>This is a header 2 tag</h2>

This is a header 2 tag


<h3>This is a header 3 tag</h3>

This is a header 3 tag


<h4>This is a header 4 tag</h4>

This is a header 4 tag


<h5>This is a header 5 tag</h5>

This is a header 5 tag


<h6>This is a header 6 tag</h6>

This is a header 6 tag

Body 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

Listing

Images

Inserting images (GIF and jpg)

Adding a link to an image

Backgrounds

Colors

Images

Fixed Image

Tables

Frames

Forms

Hexadecimal Colors

Comments

It is possible to include comments in a source HTML document that do not appear when seen through a browser. This is most useful for giving warnings and special instructions to future editors of your document. Comments take the form:
<!-----This comment will not appear in the browser----->

The comment can even break lines


<!----This comment won't be seen by anyone either even though it's broken between lines--->

Tag <!-<b> <big>

Name comment bold big (text) body of HTML document line break center font font

Code Example <!--This can be viewed in the HTML part of a document--> <b>Example</b> <big>Example</big>

Browser View Nothing will show (Tip) Example

Example (Tip)

<body>

<body>The content of your HTML page</body>

Contents of your web page (Tip)

<br> <center> <font> <font>

The contents of your page<br>The contents of your page <center>This will center your contents</center> <font face="Times New Roman">Example</font> <font face="Times New Roman" size="4">Example</font> <font face="Times New Roman" size="+3" color="#ff0000">Example</font>

The contents of your web page The contents of your web page This will center your contents Example (Tip)

Example (Tip)

<font>

font

Example

(Tip)

<form>

form

<form action="mailto:[email protected]"> Name: <input name="Name" value="" Name: size="10"><br> Email: <input name="Email" value="" size="10"><br> Email: <center><input type="submit"></center> Submit </form>

(Tip)

<h1> <h2> <h3> <h4> <h5> <h6>

heading heading heading heading heading heading

1 2 3 4 5 6

<h1>Heading <h2>Heading <h3>Heading <h4>Heading <h5>Heading <h6>Heading

1 2 3 4 5 6

Example</h1> Example</h2> Example</h3> Example</h4> Example</h5> Example</h6>

<head>

heading of <head>Contains elements describing the HTML document</head> document

Nothing will show

<hr>

horizontal rule

Contents of your web page (Tip) <hr /> Contents of your web page Contents of your web page

<hr>

horizontal rule

<hr width="50%" size="3" /> Contents of your web page Contents of your web page

<hr>

horizontal rule

<hr width="50%" size="3" noshade /> Contents of your web page

<hr> (Internet Explorer)

Contents of your web page horizontal rule <hr width="75%" color="#ff0000" size="4" /> Contents of your web page Contents of your web page horizontal rule <hr width="25%" color="#6699ff" size="6" /> Contents of your web page italic <i>Example</i> Example

<hr> (Internet Explorer) <i>

<img>

image

<img src="Earth.gif" width="41" height="41" border="0" alt="text describing the image" /> Example 1:

(Tip)

<input>

input field

<form method=post action="/cgi-bin/example.cgi"> <input type="text" size="10" maxlength="30"> <input type="Submit" value="Submit"> </form> Example 1: <menu> <li type="disc">List item 1</li> <li type="circle">List item 2</li> <li type="square">List item 3</li> </MENU>

Example 1: (Tip)
Submit

Example 1: (Tip)

List item 1 List item 2 List item 3

<li>

list item

Example 2: <ol type="i"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Example 2: i. ii. iii. iv. List item 1 List item 2 List item 3 List item 4

<marquee> scrolling (Internet text Explorer)

<marquee bgcolor="#cccccc" loop="-1" scrollamount="2" width="100%">Example Marquee</marquee> (Tip)

<ol>

ordered list Numbered <ol> <li>List <li>List <li>List <li>List </ol>

Numbered 1. 2. 3. 4. List List List List item item item item 1 2 3 4

item item item item

1</li> 2</li> 3</li> 4</li>

Numbered Special Start 5. 6. 7. 8. List List List List item item item item 1 2 3 4

Numbered Special Start <ol start="5"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li>

Lowercase Letters

<li>List item 4</li> </ol> Lowercase Letters <ol type="a"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Capital Letters

a. b. c. d.

List List List List

item item item item

1 2 3 4

Capital Letters A. B. C. D. List List List List item item item item 1 2 3 4

Capital Letters Special Start <ol type="A"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Capital Letters Special Start <ol type="A" start="3"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Lowercase Roman Numerals <ol type="i"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Capital Roman Numerals <ol type="I"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Capital Roman Numerals Special Start <ol type="I" start="7"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> C. D. E. F. List List List List item item item item 1 2 3 4

Lowercase Roman Numerals i. ii. iii. iv. List List List List item item item item 1 2 3 4

Capital Roman Numerals I. II. III. IV. List List List List item item item item 1 2 3 4

Capital Roman Numerals Special Start VII. VIII. IX. X. List item 1 List item 2 List item 3 List item 4

This is an example displaying the use of the paragraph tag. <p> This will create a line break and a space between lines. Attributes: <p align="left"> Example 1:<br /> <br /> This is an example<br> displaying the use<br> of the paragraph tag.</p> <p align="right"> Example 2:<br> <br> This is an example<br> displaying the use<br> of the paragraph tag.</p> <p align="center"> Example 3:<br> <br> This is an example<br> displaying the use<br> of the paragraph tag.</p> <small>Example</small>

This is an example displaying the use of the paragraph tag. This will create a line break and a space between lines. Attributes: Example 1: This is an example displaying the use of the paragraph tag. Example 2: This is an example displaying the use of the paragraph tag. Example 3: This is an example displaying the use of the paragraph tag.

<p>

paragraph

<small>

small (text) deleted text strong emphasis table

Example

(Tip)

<strike>

<strike>Example</strike>

Example

<strong> <table>

<strong>Example</strong> Example 1: <table border="4" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> Example 2: (Internet Explorer) <table border="2" bordercolor="#336699" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Column 1</td>

Example Example 1: (Tip) Column 1 Column 2

Example 2: (Tip) Column 1 Column 2

Example 3: (Tip) Column 1 Column 2

<td>Column 2</td> </tr> </table> Example 3: <table cellpadding="2" cellspacing="2" width="100%"> <tr> <td bgcolor="#cccccc">Column 1</td> <td bgcolor="#cccccc">Column 2</td> </tr> <tr> <td>Row 2</td> <td>Row 2</td> </tr> </table> <table border="2" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> <div align="center"> <table> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>Row 2</td> <td>Row 2</td> <td>Row 2</td> </tr> <tr> <td>Row 3</td> <td>Row 3</td> <td>Row 3</td> </tr> <tr> <td>Row 4</td> <td>Row 4</td> <td>Row 4</td> </tr> </table> </div>

Row 2

Row 2

<td>

table data

Column 1

Column 2

Colum Colum Colum n1 n2 n3


Row 2 Row 3 Row 4 Row 2 Row 3 Row 4 Row 2 Row 3 Row 4

<th>

table header

<title>

document title

<title>Title of your HTML page</title> <table border="2" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> <u>Example</u>

Title of your web page will be viewable in the title bar. (Tip) Column 1 Column 2

<tr>

table row

<u>

underline

Example

You might also like