Scribd
Upload
6 views

Internet Programming Chapter 2. HTML.

This document is a workshop guide on HTML, detailing objectives such as using text editors, basic tags, and creating elements like headings, paragraphs, and hyperlinks. It explains HTML structure, elements, and attributes, along with examples of syntax and formatting. The guide also covers CSS integration for styling and the use of tables for layout.

Uploaded by

spongebonsa145
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Internet Programming Chapter 2. HTML.

This document is a workshop guide on HTML, detailing objectives such as using text editors, basic tags, and creating elements like headings, paragraphs, and hyperlinks. It explains HTML structure, elements, and attributes, along with examples of syntax and formatting. The guide also covers CSS integration for styling and the use of tables for layout.

Uploaded by

spongebonsa145
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 45

Part 2

HTML
By FIRAOL K. (Msc.)
[email protected]
[email protected]

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 1


Objectives

By the end of this workshop, you will be able to:


• Use a text editor to author an HTML document.
• Be able to use basic tags to denote paragraphs, emphasis or special type.
• Create headings
• Paragraphs
• Comments
• images
• hyperlinks to other documents.
• Create an email link.
• Add images to your document.
• Use a table for layout.
• Apply colors to your HTML document.
• Change background color of a web page.

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 2


Cont…
This section consists :
• HTML(Hypertext Markup language).
What is HTML?
• HTML is a format that tells a computer how to display a web page.
• HTML is a language for describing web pages.
 HTML stands for Hyper Text Markup Language.
 HTML is a markup language.
 A markup language is a set of markup tags.
 The tags describe document content.
 HTML documents contain HTML tags and plain text.
 HTML documents are also called web pages. An HTML file must have an htm or html file extension

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 3


HTML Example

<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
• The DOCTYPE declaration defines the document type.
• The text between <html> and </html> describes the web page.
• The text between <body> and </body> is the visible page content.
• The text between <h1> and </h1> is displayed as a heading.
• The text between <p> and </p> is displayed as a paragraph.

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 4


HTML Tags

HTML markup tags are usually called HTML tags.


• HTML tags are keywords (tag names) surrounded by angle brackets like <html>.
• HTML tags normally come in pairs like <b> and </b>.
• 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, with a forward slash before the tag name.
• Start and end tags are also called opening tags and closing tags.
<tagname>content</tagname>

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 5


HTML Elements

• "HTML tags" and "HTML elements" are often used to describe the same thing.
• But strictly speaking, an HTML element is everything between the start tag and the end tag,
including the tags:
HTML Element:
<p>This is a paragraph.</p>

• The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox,
Safari) is to read HTML documents and display them as web pages.
• The browser does not display the HTML tags, but uses the tags to determine how the
content of the HTML page is to be presented/displayed to the user:

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 6


HTML Headings

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

<h1>This is heading1<h1>
<h2>This is heading1<h2>
<h3>This is heading1<h3>
<h4>This is heading1<h4>
<h5>This is heading1<h5>
<h6>This is heading1<h6>

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 7


HTML Paragraphs

HTML paragraphs are defined with the <p> tag.


<p>this the first paragraph</p>
HTML Links
• HTML links are defined with the <a> tag.
• <a href="http://www.w3schools.com">w3schools</a>
• Note: The link address is specified in the href attribute.
HTML Images
• HTML images are defined with the <img> tag.
• <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
• Note: The filename and the size of the image are provided as attributes.
HTML Elements
• An HTML element is everything from the start tag to the end tag:
• The start tag is often called the opening tag. The end tag is often called the closing tag.

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 8


HTML Element Syntax

• An HTML element starts with a start tag / opening tag.


• An HTML element ends with an end tag / closing tag.
• The element content is everything between the start and the end tag.
• Some HTML elements have empty content.
• Empty elements are closed in the start tag.
• Most HTML elements can have attributes.
NB:
• Most HTML elements can be nested (can contain other HTML elements).
• HTML documents consist of nested HTML elements.
Example
<!DOCTYPE html>
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
• The above document consists of 3 HTML elements.

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 9


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).
• HTML tags are not case sensitive: <P> means the same as <p>.
• Many web sites use uppercase HTML tags.
HTML Attributes
Attributes provide additional information about HTML elements.
• HTML elements can have attributes.
• Attributes provide additional information about an element.
• Attributes are always specified in the start tag.
• Attributes come in name/value pairs like: name="value".
• Attribute values should always be enclosed in quotes.
• Double style quotes are the most common, but single style quotes are also
allowed.
• Attribute names and attribute values are case-insensitive.
Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 10
HTML Attributes Reference

Attribute Description

Class Specifies one or more class names for an element (refers to a class in a
style sheet)

Id Specifies a unique id for an element.

Style Specifies an inline CSS style for an element.

Title Specifies extra information about an element (displayed as a tool tip).

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 11


HTML Tag Reference

Tag Description

<Html> Defines an HTML document.

<Body> Defines the document's body.

<h1> to <h6> Defines HTML headings.

<hr> Defines a horizontal line.

<!--> Defines a comment.

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 12


HTML Formatting Tags

• HTML uses tags like <b> and <i> for formatting output, like bold or italic text.
HTML Text Formatting Tags
Tag Description

<b> Defines bold text.

<em> Defines emphasized text.

<small> Defines smaller text.

<strong> Defines important text

<sub> Defines subscripted text.

<sup> Defines superscripted text.

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 13


HTML Comments
• Comment tags <!-- and --> are used to insert comments in HTML.
• You can add comments to your HTML source by using the following syntax:
• <!-- Write your comments here -->
• Comments are not displayed in the browser.
HTML Hyperlinks (Links)
• The HTML <a> tag defines a hyperlink.
• A hyperlink (or link) is a word, group of words, or
image that you can click on to jump to from document
to another document.
• The most important attribute of the <a> element is
the href attribute, which indicates the link's destination.
• By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue.
• A visited link is underlined and purple.
• An active link is underlined and red.
Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 14
HTML Links - The id Attribute

The id attribute can be used to create a bookmark inside an HTML document.


Tip: Bookmarks are not displayed in any special way. They are invisible to the reader.
An anchor with an id inside an HTML document:
<a id="tips">Useful Tips Section</a>
Example
<!DOCTYPE html>
<html>
<body>
<p>Create a link of an image:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" width="42" height="42"></a></p>
<p>No border around the image, but still a link:
<a href="default.asp">
<img style="border:0;" src="smiley.gif" alt="HTML tutorial" width="42"
height="42"></a></p>
</body>
</html>

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 15


HTML Head

• The <head> element is a container for all the head elements. Elements inside <head> can include scripts,
instruct the browser where to find style sheets, provide meta information, and more.
• The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>,
and <base>.
The HTML <title> Element
• The <title> tag defines the title of the document.
• The <title> element is required in all HTML/XHTML documents.
• The <title> element:
Defines a title in the browser toolbar.
Provides a title for the page when it is added to favorites.
Displays a title for the page in search-engine results.
The HTML <base> Element

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 16


Cont ..

• The <base> tag specifies the base URL/target for all relative URLs in a page:
• <head>
<base href="http://www.w3schools.com/images/" target="_blank">
</head>
The HTML <link> Element
• The <link> tag defines the relationship between a document and an external resource.
• The <link> tag is most used to link to style sheets:
• <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
The HTML <style> Element
• The <style> tag is used to define style information for an HTML document.
• Inside the <style> element you specify how HTML elements should render in a browser:
<head>
<style type="text/css">
body {background-color:yellow;
}
p {color:blue;
}
</style>
</head>
Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 17
The HTML <meta> Element

• Metadata is data (information) about data.


• The <meta> tag provides metadata about the HTML document. Metadata will not be displayed
on the page, but will be machine parsable.
• Meta elements are typically used to specify page description, keywords, author of the document,
last modified, and other metadata.
• The metadata can be used by browsers (how to display content or reload page), search engines
(keywords), or other web services.
• <meta> tags always go inside the <head> element.
Example
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
The HTML <script> Element
The <script> tag is used to define a client-side script, such as a JavaScript.
HTML Styles – CSS
CSS stands for Cascading Style Sheet.CSS is used to provide a better way to style HTML elements.

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 18


Cont…

• CSS can be added to HTML in the following ways:


• Inline - using the style attribute in HTML elements
• Internal - using the <style> element in the <head> section
• External - using an external CSS file

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 19


Cont..
Inline Styles
• An inline style can be used if a unique style is to be applied to one single occurrence of an
element.
Example

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>


<!DOCTYPE html>
<HTML>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 20


Cont…

Internal Style Sheet

• An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the <head> section
of an HTML page, by using the <style> tag, like this:
• <head>
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 21


Cont…

External Style Sheet

• An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can
change the look of an entire Web site by changing one file. Each page must link to the style sheet using the
<link> tag. The <link> tag goes inside the <head> section:
• <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 22


HTML Tables

• Tables are defined with the <table> tag.

• A table is divided into rows with the <tr> tag. (tr stands for table row)
• A row is divided into data cells with the <td> tag. (td stands for table data)
• A row can also be divided into headings with the <th> tag. (th stands for table heading)
• The <td> elements are the data containers in the table.
• The <td> elements can contain all sorts of HTML elements like text, images, lists, other
tables, etc.
• The width of a table can be defined using CSS.

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 23


Cont…
• Example
• <table style="width:300px">
<tr>
<td>Jill</td>
<td>Smith</td>
•
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
• To add borders with CSS, use the border property:
• Example
• <style>
table,th,td
{
border:1px solid black;
}
</style>

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 24


An HTML Table with Cell Padding

• Cell padding specifies the space between the cell


content and its borders.
• If you do not specify a padding, the table cells will be
displayed without padding.
• Example
• th,td
{
padding:15px;
}
Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 25
An HTML Table with Cell Spacing

• Cell spacing specifies the space between the cells.

Example
• table
{
border-spacing:5px;
}

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 26


HTML Lists

• The most common HTML lists are ordered and unordered lists:

HTML Unordered Lists

• An unordered list starts with the <ul> tag. Each list item starts with the <li>
tag.
• The list items are marked with bullets (typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 27


Cont…

HTML Ordered Lists

• An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
• The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 28


HTML Description Lists

• A description list is a list of terms/names, with a description of each term/name.


• The <dl> tag defines a description list.

• The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes
each term/name):
• <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 29


HTML List Tags

Tag Description

<ol> Defines ordered list

<ul> Defines unordered list

<li> Defines list item

<dl> Defines description list

<dt> Defines a term/name in a description list

Defines description of a term/name in the description list


<dd>

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 30


HTML Blocks

• HTML elements can be grouped together with <div> and <span>.

HTML Block Elements

• Most HTML elements are defined as block level elements or as inline


elements.
• Block level elements normally start (and end) with a new line when displayed
in a browser.
• Examples: <h1>, <p>, <ul>, <table>
HTML Inline Elements

• Inline elements are normally displayed without starting a new line.


• Examples: <b>, <td>, <a>, <img>

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 31


The HTML <div> Element

• The HTML <div> element is a block level element that can be used as a container for
grouping other HTML elements.

• The <div> element has no special meaning. Except that, because it is a block level
element, the browser will display a line break before and after it.
• When used together with CSS, the <div> element can be used to set style attributes to
large blocks of content.
• Another common use of the <div> element, is for document layout. It replaces the "old
way" of defining layout using tables. Using <table> elements for layout is not the correct
use of <table>. The purpose of the <table> element is to display tabular data.

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 32


The HTML <span> Element

• The HTML <span> element is an inline element that can be used as a


container for text.
• The <span> element has no special meaning.
• When used together with CSS, the <span> element can be used to set style
attributes to parts of the text.
HTML Grouping Tags

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 33


HTML Grouping Tags

Tag Description

<div> Defines a section in a document (block-level).

<span> Defines a section in a document (inline).

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 34


HTML Layouts

• Most websites have put their content in multiple columns (formatted like a
magazine or newspaper).
• Multiple columns are created by using <div> or <table> elements. CSS are used to
position elements, or to create backgrounds or colorful look for the pages.
• NB: Even though it is possible to create nice layouts with HTML tables, tables were
designed for presenting tabular data - NOT as a layout tool!

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 35


HTML Layouts - Using <div> Elements

• The div element is a block level element used for grouping HTML elements.
Example
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 36


Cont…

• JavaScript</div>
<div id="content" style="background-
color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-
align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 37


HTML Forms and Input

• HTML Forms are used to select different kinds of user input.


• HTML forms are used to pass data to a server.
• An HTML form can contain input elements like text fields, checkboxes,
radio-buttons, submit buttons and more. A form can also contain select lists,
textarea, fieldset, legend, and label elements.
The <form> tag is used to create an HTML form:
<form>
.
input elements
.
</form>

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 38


HTML Forms - The Input Element

• The most important form element is the <input> element.


• The <input> element is used to select user information.
• An <input> element can vary in many ways, depending on the type attribute. An <input>
element can be of type text field, checkbox, password, radio button, submit button, and
more.
• The most common input types are described below.
Text Fields
<input type="text"> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 39


Password Field

• <input type="password"> defines a password field:

• <form>
Password: <input type="password" name="pwd">
</form>
• Note: The characters in a password field are masked (shown as
asterisks or circles).

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 40


Radio Buttons

• <input type="radio"> defines a radio button. Radio buttons let a


user select ONLY ONE of a limited number of choices:

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 41


Checkboxes
• <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or
MORE options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
Submit Button
• <input type="submit"> defines a submit button.
• A submit button is used to send form data to a server. The data is sent to the page specified in the
form's action attribute. The file defined in the action attribute usually does something with the
received input:
• <form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 42
Cont…

• NB: If you type some characters in the text field above, and click the "Submit" button, the
browser will send your input to a page called "html_form_action.asp".
The page will show you the received input.
HTML Form Tags

Tag Description
<form> Defines an HTML form for user input.
<input> Defines an input control.

Defines an input control.


<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 43


Cont..
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 44


Find pdf also....
The End!
Whats Next?....CSS

Friday, April 04, 2025 Instructor: FIRAOL K (Msc.) 45

You might also like