Scribd
Upload
68 views

HTML, Which Stands For Hypertext Markup Language, Is The Predominant Markup Language

HTML is the markup language used to structure and present content on the World Wide Web. It uses tags to define headings, paragraphs, lists and other elements. A web browser reads HTML documents and displays them visually using the tags to determine how elements should be formatted and laid out. HTML allows embedding of images, videos and other objects and enables creation of interactive forms.

Uploaded by

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

HTML, Which Stands For Hypertext Markup Language, Is The Predominant Markup Language

HTML is the markup language used to structure and present content on the World Wide Web. It uses tags to define headings, paragraphs, lists and other elements. A web browser reads HTML documents and displays them visually using the tags to determine how elements should be formatted and laid out. HTML allows embedding of images, videos and other objects and enables creation of interactive forms.

Uploaded by

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

HTML, which stands for HyperText Markup Language, is the predominant markup language

for web pages. HTML is the basic building-blocks of webpages. A markup language is a set of markup tags,
and HTML uses markup tags to describe web pages.
HTML is written in the form of HTML elements consisting of tags, enclosed in angle brackets (like <html>),
within the web page content. HTML tags normally come in pairs like <h1> and </h1>. The first tag in a
pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags).
The purpose of a web browser is to read HTML documents and compose them into visual or audible web
pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.
HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded
and can be used to create interactive forms. It provides a means to create structured documents by
denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It
can embed scripts in languages such as JavaScript which affect the behavior of HTML webpages.
Web browsers can also refer to Cascading Style Sheets (CSS) to define the appearance and layout of text
and other material. The W3C, maintainer of both the HTML and the CSS standards, encourages the use of
CSS over explicitly presentational HTML markup.[1]
HTML markup consists of several key components, including elements (and their attributes), character-
based data types, character references and entity references. Another important component is the
document type declaration, which specifies the Document Type Definition. As of HTML 5, no Document
Type Definition will need to be specified and will only determine the layout mode.[41]
The Hello world program, a common computer program employed for comparing programming languages,
scripting languages and markup languages is made of 9 lines of code although in HTML newlines are
optional:
<!doctype html>
<html>
<head>
<title>Hello HTML</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
(The text between <html> and </html> describes the web page, and The text between <body> and
</body> is the visible page content.)
This Document Type Declaration is for HTML 5. If the <!doctype html> declaration is not included,
Windows Internet Explorer
will render using "quirks mode".[42]

[edit] Elements
Main article: HTML element
HTML documents are composed entirely of HTML elements that, in their most general form have three
components: a pair of element tags, a "start tag" and "end tag"; some element attributes within the start
tag; and finally, any textual and graphical content between the start and end tags. The HTML element is
everything between and including the tags. Each tag is enclosed in angle brackets.
The general form of an HTML element is therefore: <tag attribute1="value1"
attribute2="value2">content to be rendered</tag> The name of the HTML element is also the name of
the tag. Note that the end tag's name is preceded by a slash character, "/". If attributes are not assigned,
default values are used.
[edit] Element examples
Header of the HTML document:<head>...</head>. Usually the title should be included in the head, for
example:
<head>
<title>The title</title>
</head>
Headings: HTML headings are defined with the <h1> to <h6> tags:
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<h6>Heading6</h6>
Paragraphs:
<p>Paragraph 1</p> <p>Paragraph 2</p>
Line breaks:<br>. The difference between <br> and <p> is that 'br' breaks a line without altering the
semantic structure of the page, whereas 'p' sections the page into paragraphs. Note also that 'br' is an
empty element in that, while it may have attributes, it can take no content or end tag.
<p>This <br> is a paragraph <br> with <br> line breaks</p>

Tag Name Code Example Browser View


<!--This can be viewed in the HTML part of a
<!-- comment Nothing will show (Tip)
document-->
<a href="http://www.domain.com/">
<a - anchor Visit Our Site (Tip)
Visit Our Site</a>
<b> bold <b>Example</b> Example
<big> big (text) <big>Example</big> Example (Tip)
body of
HTML
<body> <body>The content of your HTML page</body> Contents of your web page (Tip)
documen
t
line The contents of your page<br>The contents of your The contents of your web page
<br>
break page The contents of your web page
<center
center <center>This will center your contents</center> This will center your contents
>
<dl> Definition Term
<dt>Definition Term</dt> Definition of the term
definition
<dd>Definition of the term</dd> Definition Term
<dd> descripti
<dt>Definition Term</dt> Definition of the term
on
<dd>Definition of the term</dd>
</dl>
<dl> Definition Term
<dt>Definition Term</dt> Definition of the term
definition <dd>Definition of the term</dd> Definition Term
<dl>
list <dt>Definition Term</dt> Definition of the term
<dd>Definition of the term</dd>
</dl>
<dl> Definition Term
<dt>Definition Term</dt> Definition of the term
definition <dd>Definition of the term</dd> Definition Term
<dt>
term <dt>Definition Term</dt> Definition of the term
<dd>Definition of the term</dd>
</dl>
This is an <em>Example</em> of using This is an Example of using
<em> emphasis
the emphasis tag the emphasis tag
<embed embed <embed src="yourfile.mid" width="100%"
> object height="60" align="center"> (Tip)

<embed src="yourfile.mid" autostart="true"


Music will begin playing when your
<embed embed hidden="false" loop="false">
page is loaded and will only play one
> object <noembed><bgsound src="yourfile.mid"
time. A control panel will be displayed
loop="1"></noembed>
to enable your visitors to stop the
music.
<font> font <font face="Times New Roman">Example</font> Example (Tip)
<font face="Times New Roman"
<font> font Example (Tip)
size="4">Example</font>
<font face="Times New Roman" size="+3"
<font> font Example (Tip)
color="#ff0000">Example</font>
<form action="mailto:[email protected]">
Name: <input name="Name" value=""
size="10"><br>
<form> form Email: <input name="Email" value=""
size="10"><br>
<center><input type="submit"></center>
</form>

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

heading <head>Contains elements describing the


of HTML document</head>
<head>
documen
t
horizonta
<hr> <hr />
l rule
horizonta
<hr> <hr width="50%" size="3" />
l rule
horizonta
<hr> <hr width="50%" size="3" noshade />
l rule
<hr> <hr width="75%" color="#ff0000" size="4" />
horizonta
(Internet
l rule
Explorer)
<hr> <hr width="25%" color="#6699ff" size="6" />
horizonta
(Internet
l rule
Explorer)
<html> hypertext <html>
markup <head>
<meta>
<title>Title of your web page</title>
</head>
language
<body>HTML web page contents
</body>
</html>
<i> italic <i>Example</i> Example

<img src="Earth.gif" width="41" height="41"


<img> image
border="0" alt="text describing the image" />

Example 1:

input <form method=post action="/cgi-bin/example.cgi">


<input>
field <input type="text" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
Example 2:

<form method=post action="/cgi-bin/example.cgi">


<input> <input type="text" style="color: #ffffff; font-family:
input
(Internet Verdana; font-weight: bold; font-size: 12px;
field
Explorer) background-color: #72a4d2;" size="10"
maxlength="30">
<input type="Submit" value="Submit">
</form>
Example 3:

<form method=post action="/cgi-bin/example.cgi">


<table border="0" cellspacing="0"
input cellpadding="2"><tr><td bgcolor="#8463ff"><input
<input>
field type="text" size="10" maxlength="30"></td><td
bgcolor="#8463ff" valign="Middle"> <input
type="image" name="submit"
src="yourimage.gif"></td></tr> </table>
</form>
Example 4:

<form method=post action="/cgi-bin/example.cgi">


Enter Your Comments:<br>
input
<input> <textarea wrap="virtual" name="Comments" rows=3
field
cols=20 maxlength=100></textarea><br>
<input type="Submit" value="Submit">
<input type="Reset" value="Clear">
</form>
Example 5:

<form method=post action="/cgi-bin/example.cgi">


<center>
Select an option:
<select>
<option >option 1</option>
input
<input> <option selected>option 2</option>
field
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
<input type="Submit" value="Submit"></center>
</form>
Example 6: (Tip)
Example 6: Select an option:
<form method=post action="/cgi-bin/example.cgi">
Select an option:<br> Option 1
<input type="radio" name="option"> Option 1
<input type="radio" name="option" checked> Option Option 2
2
<input type="radio" name="option"> Option 3
<br> Option 3
input
<input> <br>
field Select an option:
Select an option:<br>
<input type="checkbox" name="selection">
Selection 1 Selection 1
<input type="checkbox" name="selection" checked>
Selection 2
Selection 2
<input type="checkbox" name="selection">
Selection 3
<input type="Submit" value="Submit"> Selection 3
</form>
Submit

<li> list item Example 1: Example 1: (Tip)

<menu>
<li type="disc">List item 1</li> • List item 1
<li type="circle">List item 2</li>
<li type="square">List item 3</li>
</MENU> o List item 2

Example 2:
 List item 3

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

iv. List item 4

<head>
<link rel="stylesheet" type="text/css" href="style.css"
<link> link
/>
</head>

<marque
<marquee bgcolor="#cccccc" loop="-1"
e> scrolling
scrollamount="2" width="100%">Example
(Internet text
Marquee</marquee>
Explorer)

(Tip)

• List item 1
<menu>
<li type="disc">List item 1</li>
<menu> menu <li type="circle">List item 2</li> o List item 2
<li type="square">List item 3</li>
</menu>
 List item 3

<meta name="Description" content="Description of


your site">
<meta> meta
<meta name="keywords" content="keywords
describing your site">
<meta HTTP-EQUIV="Refresh"
<meta> meta
CONTENT="4;URL=http://www.yourdomain.com/">
<meta> meta <meta http-equiv="Pragma" content="no-cache">
<meta> meta <meta name="rating" content="General">
<meta> meta <meta name="robots" content="all">
<meta> meta <meta name="robots" content="noindex,follow">
<ol> ordered Numbered Numbered
list
<ol>
<li>List item 1</li> 1. List item 1
<li>List item 2</li> 2. List item 2
<li>List item 3</li> 3. List item 3
<li>List item 4</li> 4. List item 4
</ol>
Numbered Special Start
Numbered Special Start

<ol start="5"> 5. List item 1


<li>List item 1</li> 6. List item 2
<li>List item 2</li> 7. List item 3
<li>List item 3</li> 8. List item 4
<li>List item 4</li>
</ol>
Lowercase Letters
Lowercase Letters
a. List item 1
<ol type="a"> b. List item 2
<li>List item 1</li> c. List item 3
<li>List item 2</li> d. List item 4
<li>List item 3</li>
<li>List item 4</li>
</ol> Capital Letters

Capital Letters A. List item 1


B. List item 2
<ol type="A"> C. List item 3
<li>List item 1</li> D. List item 4
<li>List item 2</li>
<li>List item 3</li> Capital Letters Special Start
<li>List item 4</li>
</ol>
C. List item 1
Capital Letters Special Start D. List item 2
E. List item 3
F. List item 4
<ol type="A" start="3">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li> Lowercase Roman Numerals
<li>List item 4</li>
</ol>
i. List item 1
Lowercase Roman Numerals ii. List item 2
iii. List item 3
iv. List item 4
<ol type="i">
<li>List item 1</li>
<li>List item 2</li> Capital Roman Numerals
<li>List item 3</li>
<li>List item 4</li> I. List item 1
</ol>
II. List item 2
III. List item 3
Capital Roman Numerals
IV. List item 4

<ol type="I"> Capital Roman Numerals Special


<li>List item 1</li>
Start
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li> VII. List item 1
</ol> VIII. List item 2
IX. List item 3
Capital Roman Numerals Special Start

X. List item 4
<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>
<form method=post action="/cgi-bin/example.cgi">
<center>
Select an option:
<select>
<option>option 1</option>
<option selected>option 2</option>
<option listbox
<option>option 3</option>
> option
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
</center>
</form>
This is an example displaying the use
This is an example displaying the use of the paragraph of the paragraph tag.
tag. <p> This will create a line break and a space
between lines.
This will create a line break and a
Attributes: space between lines.

Example 1:<br> Attributes:


<br>
<p align="left"> Example 1:
This is an example<br>
displaying the use<br> This is an example
of the paragraph tag.<br> displaying the use
paragrap <br> of the paragraph tag.
<p>
h Example 2:<br>
<br>
<p align="right"> Example 2:
This is an example<br>
displaying the use<br> This is an example
of the paragraph tag.<br> displaying the use
<br> of the paragraph tag.
Example 3:<br>
<br>
<p align="center"> Example 3:
This is an example<br>
displaying the use<br> This is an example
displaying the use
of the paragraph tag.
of the paragraph tag.
small
<small> <small>Example</small> Example (Tip)
(text)
deleted
<strike> <strike>Example</strike> Example
text
<strong strong
<strong>Example</strong> Example
> emphasis
Example 1:
Example 1: (Tip)
<table border="4" cellpadding="2" cellspacing="2"
width="100%"> Column 1 Column 2
<tr>
<td>Column 1</td>
<table> table <td>Column 2</td>
</tr> Example 2: (Tip)
</table>

Example 2: (Internet Explorer) Column 1 Column 2

<table border="2" bordercolor="#336699"


cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Example 3:
Example 3: (Tip)
<table cellpadding="2" cellspacing="2"
width="100%">
<tr> Column 1 Column 2
<td bgcolor="#cccccc">Column 1</td>
<td bgcolor="#cccccc">Column 2</td> Row 2 Row 2
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</table>
<table border="2" cellpadding="2" cellspacing="2"
width="100%">
<tr>
table
<td> <td>Column 1</td>
data Column 1 Column 2
<td>Column 2</td>
</tr>
</table>
<div align="center"> Colum Colum Colum
<table> n1 n2 n3
<tr> Row 2 Row 2 Row 2
<th>Column 1</th>
Row 3 Row 3 Row 3
<th>Column 2</th>
<th>Column 3</th>
Row 4 Row 4
Row
</tr>
<tr> 4
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
table </tr>
<th>
header <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>
documen Title of your web page will be viewable
<title> <title>Title of your HTML page</title>
t title in the title bar. (Tip)
<table border="2" cellpadding="2" cellspacing="2"
Column 1 Column 2
width="100%">
<tr>
<tr> table row <td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
<tt> teletype <tt>Example</tt> Example
<u> underline <u>Example</u> Example
Example 1:
Example 1:<br>
<br>
<ul> • List item 1
<li>List item 1</li> • List item 2
<li>List item 2</li>
</ul>
<br>
unordere Example 2:<br> Example 2:
<ul>
d list <ul type="disc">
<li>List item 1</li>
<li>List item 2</li> • List item 1
<ul type="circle">
<li>List item 3</li> • List item 2
<li>List item 4</li> o List item 3
</ul>
</ul>
o List item 4

You might also like