Tute 11 - Hypertext Markup Language

Hypertext Markup Language (HTML)
What is HTML?
HTML is the standard markup language for creating Web pages.
 HTML describes the structure of Web pages using markup

 HTML elements are the building blocks of HTML pages
 HTML elements are represented by tags
 HTML tags label pieces of content such as "heading", "paragraph", "table"
 Browsers do not display the HTML tags, but use them to render the content of
the page
HTML Tags
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
 HTML tags normally come in pairs like <p> and </p>

 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, but with a forward slash inserted
before the tag name
HTML Elements
An HTML element usually consists of a start tag and end tag, with the content
inserted in between:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag
Empty HTML Elements
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line
break).
Empty elements can be "closed" in the opening tag like this: <br />.
HTML5 does not require empty elements to be closed. But if you want stricter
validation, or if you need to make your document readable by XML parsers, you
must close all HTML elements properly.
1
HTML Attributes
 All HTML elements can have attributes

 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"
Here, a title attribute is added to the <p> element.
<p title="I'm a tooltip">

This is a paragraph.
</p>
Use Lowercase Tags
HTML tags are not case sensitive: <P> means the same as <p>.
The HTML5 standard does not require lowercase tags, but

W3C recommends lowercase in HTML, and demands lowercase for stricter
document types like XHTML.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important
heading:
2
<html>
<body>
<h1>This is heading 1</h1>
</body>
</html>
HTML Links
HTML links are defined with the <a> tag:
<a href="http://www.google.com">This is a link</a>
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
 _blank - Opens the linked document in a new window or tab

 _self - Opens the linked document in the same window/tab as it was clicked
(this is default)
<a href="http://www.google.com" target="_blank">Open a Search Engine!</a>
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as
attributes, The alt attribute provides an alternate text for an image, if the user for
some reason cannot view it (because of slow connection, an error in the src
attribute, or if the user uses a screen reader).
If a browser cannot find an image, it will display the value of the alt attribute
3
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
However, it is common to store images in a sub-folder. You must then include the
folder name in the src attribute.
<img src="/images/html5.gif" alt="HTML5

Icon" style="width:128px;height:128px;">
Single or Double Quotes?
Double quotes around attribute values are the most common in HTML, but single
quotes can also be used.
In some situations, when the attribute value itself contains double quotes, it is
necessary to use single quotes:
<p title='John "ShotGun" Nelson'>
Or vice versa:
<p title="John 'ShotGun' Nelson">
With HTML, you cannot change the output by adding extra spaces or extra lines in
your HTML code.
The browser will remove any extra spaces and extra lines when the page is
displayed:
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<pre>
This paragraph
contains a lot of spaces
in the source code,
now the browser
considers it.
</pre>
HTML Formatting Elements
4
 <b> - Bold text
 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Small text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is bold</strong></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
<p><mark>Hello</mark></p>
<p><small>Hello</small></p>
<p><del>Hello</del></p>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
</body>
</html>
<html>
<body>
<p>Browsers usually insert quotation marks around the q element.</p>
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
<blockquote> Today is Saturday </blockquote>
<blockquote><blockquote>This is my ICT AL class </blockquote></blockquote>
5
<blockquote>
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</body>
</html>
6
HTML Comments
Notice that there is an exclamation point (!) in the opening tag, but not in the
closing tag.

HTML Colors
In HTML, a color can be specified by using a
i. Color name, or
ii. RGB value, or
iii. HEX value.
<font color="orange">
Font-color set by using orange
</font>
<h2 style="background-color:red">
Background-color set by using red
</h2>
<h2 style="background-color:rgb(255,0,0)">
Background-color set by using rgb(255,0,0)
</h2>
7
</h2>
</h2>
<h2 style="background-color:#FF0000">
Background-color set by using #FF0000
</h2>
<h2 style="background-color:#00FF00">
Background-color set by using #00FF00
</h2>
HTML Tables
<html>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
<td>65</td>
</tr>
<tr>
<td>Arnold</td>
<td>Subasinghe</td>
<td>48</td>
8
</tr>
<tr>
<td>Dawal</td>
<td>Tharu</td>
<td>18</td>
</tr>
</table>
</body>
</html>
<html>
<body bgcolor="orange">
<table border=2 bgcolor="yellow" width=500 height=150>
<tr bgcolor="pink">
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<html>
<body bgcolor="orange">
<table border=2 bgcolor="yellow" width=500 height=150>
<tr>
<th colspan=2>Name</th>
<th rowspan=2>Age</th>
</tr>
<tr>
<th>Firstname</th>
<th>Lastname</th>
9
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
<td>65</td>
</tr>
<tr>
<td>Arnold</td>
<td>Subasinghe</td>
<td>48</td>
</tr>
<tr>
<td>Dawal</td>
<td>Tharu</td>
<td>18</td>
</tr>
</table>
</body>
</html>
HTML Lists
1. Unordered List
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li> <ul style="list-style-type:square">
10
</ul>
</body>
</html>
The HTML type or CSS list-style-type property is used to define the style of the
list item marker:
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
<ul type="square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
2. Ordered List
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
11
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
3. Description / Definition Lists
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
HTML Forms
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on

the type attribute.
Here are some examples:
Type Description
<input type="text"> Defines a one-line text input field
<input type="radio"> Defines a radio button (for selecting one of many choices)
<input type="submit"> Defines a submit button (for submitting the form)
12
<form>
First name: <input type="text" name="firstname">
<br>
Last name: <input type="text" name="lastname">
</form>
<form action="/action_page.php">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
The action attribute defines the action to be performed when the form is submitted.
Normally, the form data is sent to a web page on the server when the user clicks on the submit button.
In the example above, the form data is sent to a page on the server called "/action_page.php". This page
contains a server-side script that handles the form data:
<textarea name="message" rows="10" cols="30">

The cat was playing in the garden.</textarea>
<br>
</form>
13
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
</form>
The Method Attribute

The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form
data:
<form action="/action_page.php" method="get">
<form action="/action_page.php" method="post">
When to Use GET?

The default method when submitting form data is GET.
However, when GET is used, the submitted form data will be visible in the page address field:
When to Use POST?

Always use POST if the form data contains sensitive or personal information. The POST method does not
display the submitted form data in the page address field.
14
Clear Input Field with a Button
<!DOCTYPE html>
<html>
<body>
<p>Clear the input field when you click on the button:</p>
<button onclick="document.getElementById('myInput').value = ''">Clear input field</button>
<input type="text" value="Blabla" id="myInput">
</body>
</html>
Copy a Text
<!DOCTYPE html>
<html>
<body>
Field1: <input type="text" id="field1" value="Hello World!"><br>
Field2: <input type="text" id="field2"><br><br>
<button onclick="myFunction()">Copy Text</button>
<p>A function is triggered when the button is clicked. The function copies the text from Field1 into
Field2.</p>
<script>
15
function myFunction() {
document.getElementById("field2").value = document.getElementById("field1").value;
</script>
</body>
</html>
16

Tute 11 - Hypertext Markup Language

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tute 11 - Hypertext Markup Language

Uploaded by

Copyright:

Available Formats

Hypertext Markup Language (HTML)

HTML is the standard markup language for creating Web pages.

 HTML describes the structure of Web pages using markup

HTML tags are element names surrounded by angle brackets:

<tagname>content goes here...</tagname>

 HTML tags normally come in pairs like <p> and </p>

<tagname>Content goes here...</tagname>

Empty HTML Elements

HTML elements with no content are called empty elements.

 All HTML elements can have attributes

Here, a title attribute is added to the <p> element.

<p title="I'm a tooltip">

Use Lowercase Tags

The HTML5 standard does not require lowercase tags, but

<h1>My First Heading</h1>

HTML headings are defined with the <h1> to <h6> tags.

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

HTML links are defined with the <a> tag:

<a href="http://www.google.com">This is a link</a>

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

 _blank - Opens the linked document in a new window or tab

<a href="http://www.google.com" target="_blank">Open a Search Engine!</a>

HTML images are defined with the <img> tag.

<img src="/images/html5.gif" alt="HTML5

Single or Double Quotes?

<p title='John "ShotGun" Nelson'>

<p title="John 'ShotGun' Nelson">

HTML Formatting Elements

<p><b>This text is bold</b></p>

<p><strong>This text is bold</strong></p>

<p><i>This text is italic</i></p>

<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

<p>Browsers usually insert quotation marks around the q element.</p>

<blockquote> Today is Saturday </blockquote>

<blockquote><blockquote>This is my ICT AL class </blockquote></blockquote>

For 50 years, WWF has been protecting the future of nature.

The world's leading conservation organization,

WWF works in 100 countries and is supported by

1.2 million members in the United States and

close to 5 million globally.

Written by John Doe.<br>

Box 564, Disneyland<br>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<table border=2 bgcolor="yellow" width=500 height=150>

<table border=2 bgcolor="yellow" width=500 height=150>

<h2>An unordered HTML list</h2>

<li>Milk</li> <ul style="list-style-type:square">

disc Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle

square Sets the list item marker to a square

<h2>An ordered HTML list</h2>

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

3. Description / Definition Lists

<h2>A Description List</h2>