WEB DEVELOPMENT

HTML
Dr. Safar M. Asaad

Koya University
Faculty of Engineering
Software Engineering Department
 Outlines
■ Introduction to Markup languages.
■ Compare the different versions of HTML.
■ Study the syntax of HTML tags
■ Define a Web page head, body, and title
■ Work with the HTML5 structural elements
■ Text Formatting and Block-level formatting Elements In
HTML5.
 scripts vs. programs vs. Markups
■ A "program" is a sequence of instructions written so that a computer
can perform specific tasks to get the desired output.
– When we need to write on a CD or burn a CD, all instructions are given through
software, which involves some instructions or a set of codes, and this software
communicates to the hardware.

■ A "script" is a program written in a scripting language.

– Scripting languages are programming languages commonly used for
automation, rapid development, or controlling software environments.

– Many scripting languages are interpreted or use runtime execution

models rather than traditional ahead-of-time compilation.

– Examples include JavaScript, Python, PHP, and Perl.

 scripts vs. programs vs. Markups
■ Markup Languages: Markup languages are different from
programming and scripting languages in their purpose.
– Markup languages use predefined tags or symbols to describe the
structure or formatting of data.

– These tags are embedded within the content and provide

instructions on how the data should be interpreted or displayed.
– Markup languages usually do not contain logic or algorithms like
conditions or loops

– such as HTML. It does not ask any questions to the computer,

does not compare things, and does not ask any logical
questions.
Feature Markup Languages Programming Languages Scripting Languages

• Automate tasks and

Primary • Describe structure or • Build full software and
control
Purpose formatting of content systems
environments

• No logic (no loops, • Logic support (often

Logic Support • Full logic support
conditions) simpler usage)

• Not executed;
• Compiled or interpreted • Usually interpreted
Execution interpreted by other
and executed directly or runtime-executed
software

• Structure and • Algorithms and system • Automation, and

Focus
presentation behavior rapid development

• Structured
Output Type • Executable programs • Scripts that run tasks
documents/data

Standalone • Often yes (modern

• No • Yes
Programs scripting languages)

• Often compiled (e.g., • Usually not ahead-

Compilation • Not compiled
C) of-time compiled
Common • Browsers, parsers, • Operating systems, • Browsers, shells,
Environments renderers runtimes interpreters
 Types of Markup Languages
1. Structural / Document Markup Languages: These languages are used to structure
and describe text or data.
– HTML (Hypertext Markup Language): Primarily used for creating web pages and
defining their structure and content.
– XML (eXtensible Markup Language): Designed for storing and transporting
structured data. It's widely used for data exchange between different systems and
configuration files.
– Markdown: A lightweight markup language used for formatting plain text
documents, such as README files or forum posts.

2. Style and Transformation Languages: These languages are often used alongside
markup languages.
– CSS (Cascading Style Sheets): A stylesheet language used with HTML to control
layout, style, and visual appearance.
– XSL (eXtensible Stylesheet Language): Used for transforming and formatting
XML documents. (e.g., converting XML into HTML or PDF).
 Introducing HTML
■ HTML, or Hypertext Markup Language, is a language of the
Web.

■ Itʼs a markup language, which means it is used to identify and

format elements of a page so that web browsers can render
and interpret it.

■ It is not a programming language. But itʼs a language

understood by all web browsers.

■ Characteristics:
– Describes the content and structure of a document

– Uses tags
 HTML History
Year Version Features
1991 Tim Berners-Lee invented HTML structure content using tags and links
1995 HTML Working Group defined HTML 2.0 Introduced features like forms and tables.
1997 W3C Recommendation: HTML 3.2 HTML 3.0
Proposed but never officially released.
Intended to include features like improved
forms and tables.
Note:
W3C stands for “ World Wide Web HTML 3.2
Consortium” Support for tables and forms, including new
input types and attributes.
Enhanced support for internationalization.
1999 W3C Recommendation: HTML 4.01 Added support for stylesheets and scripting.
2000 W3C Recommendation: XHTML 1.0 The reformulation of HTML 4.01 follows XML
syntax rules.
It was designed to be compatible with existing
HTML documents while adhering to the
stricter syntax rules of XML.
2014 W3C Recommendation: HTML5 Significantly expanded capabilities, including
multimedia support and semantic elements.
 HTML Source Document
■ When you connect to a web page by entering its URL into the browser

– Browser instructs your computer to send a message out

over the Internet to the computer specified by that URL
requests that it sends back a certain document (HTML
source doc)

– HTML source doc describes the content and layout of the

web page

– After your computer receives the HTML, your browser

interprets the HTML and displays the resulting web page
(text/graphics/links , etc)
 HTML Source Document
■ HTML source document

– A text-only document

– Consists of (1) actual text and (2) tags

■ A tag is an HTML code enclosed in angle brackets <>; it is used to lay out
the web page.

■ HTML can be created using a simple text editor like notepad

■ The file extension must be .html or .htm

Sample HTML

HTML Source Firefox display of the html

source
Tools for Creating HTML Documents
■ Basic text editor such as Windows Notepad (PC) or TextEdit (Mac).

■ Other software programs that enable you to create documents in different

formats, such as Microsoft Word or Adobe Acrobat, include tools to convert
their documents into HTML for quick and easy publishing on the Web

■ Web publishing software (such as Joomla and WordPress) manages all of

the code and extended features
your site.
Entering Elements and Attributes
■ An HTML document is composed of elements that represent
distinct items in the Web page, such as a paragraph, the page
heading, or even the entire body of the page itself.

– Elements are marked by one or more tags

■ A two-sided tag is a tag that contains some document content.

General syntax for a two-sided tag:

<element>content</element>
 Marking Elements with Tags
■ A two-sided tagʼs opening tag (<p>) and closing tag (</p>) should
completely enclose its content.
■ HTML5 element names by convention are written in lowercase
letters
■ Elements can contain other elements
– Tags cannot overlap
<p> Web Programming. </p>

Start tag Content End tag

<p> Introduction to HTML5 </p>

Element
 Adding an Attribute to an Element
■ An HTML attribute provides additional information about an HTML element.

– Attributes are used to define properties or behavior of elements.

■ To add an element attribute, use the format

<element attribute1=“value1” attribute2=“value2” ...> content </element>

■ where attribute1, attribute2, etc. are the names of attributes associated with the
element, and value1, value2, etc. are the values of those attributes.

<p align =“left”> WPR5317- Web Programming </p>

 Attribute Rules
■ Few rules about HTML5 attributes:
• Attributes appear inside the start tag of an element.
• HTML is case-insensitive, but lowercase attribute names
are recommended.
• Attribute values are usually written in quotes, though
HTML5 allows unquoted and boolean attributes.
• HTML5 defines core (global) attributes that can be used on
most elements.
■ Common core attributes:
1. id – unique identifier within the document.
2. class – list of classes for styling or scripting.
3. style – inline CSS styles.
4. title – advisory text, often shown as a tooltip.
Exploring the Structure of an HTML Document

<html>

<head>

head content

</head>

<body>

body content

</body>

</html>
 Document Type Declaration
■ Prior to the opening <html> tag, many HTML files also include a
Document Type Declaration, or doctype, to indicate the type of markup
language used in the document.

■ Doctype for HTML 4.01:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01/EN”

“[Link]

■ Doctype for XHTML:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“[Link]

■ Doctype for HTML5:

<!DOCTYPE html>
 The <head> Element
■ The <head> element must be placed inside the <html> element.
■ It contains information about the document, such as keywords for search
engines and link information that defines the relationship this document
has to other documents.
– This information is not displayed on the page but helps browsers,
search engines, and other systems understand the document.
■ Common elements inside <head> include:
– <title> - Defines the title of the document (shown in the browser tab).
– <base> - defines the document base URL, which is used for relative links in the
document.
– <link> - Links external resources such as stylesheets or icons.
– <meta> - defines additional information about the document, including the documentʼs
content type and special instructions for browsers and search engines.
– <script> - Includes or links JavaScript code.
– <noscript> - defines an alternate content to be displayed to users that have disabled scripts in their
browser or have a browser that doesn't support script.
– <style> - Contains internal CSS styles.
 The <title> Element
■ Page Title (appears in the title bar of the browser)
■ Syntax:
<title>document title</title>
■ Example:
<title>Shop clothes for women, men, maternity, baby, and kids
</title>

title
 Working with Metadata
■ Web authors often turn to search engine optimization (SEO)
tools to make their sites appear more prominently in search
engines.
■ Information about the site is called metadata
■ Add metadata to your Web pages by adding a meta element
to the head section of the document
■ Syntax:

<meta name="text" content="text” >

■ Modern websites rely on a small set of essential meta tags,

while many older ones from early HTML are now ignored.
 Working with Metadata - Examples
■ Store the name of the Web pageʼs author:

<meta name=“author” content=“John Doe”/>

■ Add a description of the Web site:

<meta name="description" content="Expect more pay less with Target.

Spend $50, get free shipping on over 500K items. Chose from a wide
selection of furniture, baby, electronics, toys, shoes" />

■ Add a list of keywords:

<meta name="keywords" content=“Target, furniture, baby,

electronics, toys, shoes, apparel, video games, kitchen, bedding,
sporting goods, appliances, free shipping" />
 Working with Base Tag - Examples
■ The <base> tag specifies the base URL and/or target for all relative URLs in
a document.
■ The <base> tag must have either an href or a target attribute present, or
both.
■ There can only be one single <base> element in a document, and it must be
inside the <head> element.
■ The <base> tag does not support any event attributes.
■ Note:
Since we have specified a base URL in the head section, the browser will
look for the image at [Link]
<!DOCTYPE html> Example
<html>
<head>
<base href="[Link] target="_blank">
</head>
<body>
<h1>The base element</h1>
<img src="images/[Link]” >
</body>
</html>
 Adding Comments
■ Purpose: Explain your code to yourself or others.
■ Comments are not displayed in the browser.
■ Comments can be spread over several lines if necessary.
■ Syntax:
<!-- comment -->

■ Example:
<!– The doctype of this document indicates that HTML5 is used -->
 Working With HTML <body> Tag
■ The <body> tag defines the document's body.

■ The <body> element contains all the contents of an HTML

document, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.

■ Note:
There can only be one <body> element in an HTML document.
 Defining the Structure of the Page Body
■ There are a group of HTML elements that are created to give
our documents more structure.
■ You've already used the first section element: body.
■ The body can also include additional structural or
organizational elements.
 Insert HTML5 Structural Elements
— Example:
<header>. . .</header>
<nav>. . . </nav>
<section>

<article>

</article>

<article>

</article>
<aside> . . . </aside>
</section>
<footer>. . . </footer>
No Structural Element in HTML 4.01
or XHTML
■ Replace the structural elements with div elements.

■ Syntax:

<div id=“id”>
content

</div>
Validating An HTML5 Document
■ While many free and commercial programs are available, one
of the simplest ways to check if your markup documents are
well-formed and valid is to use the free online validating tool
from the W3C website. It can check your documents either on
your computer or from a website.

■ The W3C markup validation service is available at:

[Link]

■ The next page shows the first step in using the file upload
version of the validator.
 Basic Formatting Elements In HTML5

■ Formatting elements are designed to display special types of

texts.

■ In general, the formatting elements can be classified into two

groups:

1. block-level formatting elements.

2. Text Formatting Elements

 Block-level Formatting Elements
■ Block-level elements typically start on a new line and occupy the
full width of their parent container by default.

■ Block-level elements can have their width, height, margins, and

padding adjusted easily.

■ Block-level elements often serve as containers for other elements,

like text, images, or even other block-level elements.

– The elements are used to break documents into logical chunks

or sections.

– These elements are referred to as block-level elements because

they describe blocks of content.
Block-level Formatting or Grouping Elements

Element Name Formatting Style

<p>...</p> Paragraph element
<br > Line break (empty element)

<h1>...</h1> to <h6>...</h6> Heading elements (1 is largest, 6 is smallest)

<hr /> Horizontal rule (empty element)

Contact information(Usually rendered in italic
<address>. . .</address> during its presentation, but that’s
presentation, not meaning).
<blockquote>…</blockquot specifies a section that is quoted from
e> another source (usually indent the content).
<div>...</div> Section divider
 Heading Elements
■ Contain the text of main headings on a Web page.
■ Syntax:
<h1>content</h1>
<h2>content</h2>
<h3>content</h3>
<h4>content</h4>
<h5>content</h5>
<h6>content</h6>
■ h1 is largest heading in size -> h6 is smallest heading in size
 Paragraph Elements
■ Create paragraphs

■ Syntax:

<p>content</p>

■ Example:
<p>This course provides for the building of browser- oriented applications for
intranet and extranet uses. Students will build complex applications using web
technologies. The course will include In-depth coverage of markup languages such
as the Hypertext Markup Language (HTML), Dynamic Hypertext Markup
Language (DHTML), and the Extensible Hypertext Markup Language
(XHTML).
</p>
 Blockquote Elements
■ Enter quotes

■ A section that is quoted from another source

■ The content of the blockquote elements is indented in the browser.

■ Syntax:

<blockquote>content</blockquote>

■ Example:

<h3>Steve Jobsʼ inspirational quote:</h3>

<blockquote>Innovation distinguishes between a leader and a
follower.</blockquote>
 Address Elements
— Italicize an address.
— Syntax:
<address>content</address>

— Example:
<address>
Caroline Collier
Georgia College
Campus Box 012
Milledgeville, GA 31061
</address>
 The <br > Element
■ The <br > element is the line break element. Similar to the <p>
element, it is used to break up sections of text.

■ The <br > element causes the browser to create a single line
return (single carriage return).

■ The <br > element is an empty element

■ Example:

<p> This paragraph has a line <br > separated by a line break.</p>
 The <hr > Element
■ The <hr > element is the horizontal rule element, used to create a visible
horizontal line on the Web page to indicate a section break or change in
content.

■ HTML provides a set of attributes that can be used with this element to
customize the rule. In HTML5, Strict customization of the line is done via
CSS.

■ Example:

<p>There is a horizontal line between this line <hr > and this line. <p>
 The <div> Element
■ The <div> element is used to divide sections of content. This
element is used to label sections of the document, and

■ It can contain any number of other elements.

■ This element can use the id and class core HTML attributes to
identify the various sections of the document to be used with
parser programs.

■ Example:

<div> This is a section.</div>

<div> This is another section.</div>

 Text Formatting Elements
■ Text formatting elements are referred to as character-level elements
because, unlike the block-level elements, which describe blocks of
content, these elements describe the text itself.

■ Character-level elements describe the formatting of words or

phrases as opposed to sections or paragraphs.

■ There are two basic groups of text formatting elements: presentation

styles, and logical styles.

– Presentational styles describe how the text should be displayed,

in bold type or italics, for example.

– Logical styles describe the meaning of the style more than the
actual format.
 Presentational Text Formatting
Element Name Formatting Style
<b>...</b> Bold font style

<i>...</i> Italic font style

<u>...</u> underline

strike-through,
Defines text that has been deleted from a document. Browsers
<del>...</del> will usually strike a line through deleted text. Pair a <del>
element with an <ins> element to identify the inserted text that
replaced the deleted text.

<small>...</small> Decrease current font size

_... Subscripted text

^... Superscripted text

Presentational Text Formatting –
Example
Presentational Text Formatting –
Example
 The <del> Element
■ Example

<p>The price has been <del>reduced</del> <ins>increased</ins> to $50.</p>

Logical Text Formatting Elements
■ Logical text formatting describes the meaning of the style more than
the actual format.

■ Initially, browsers were left to determine the presentation of these

tags as they saw fit. Still, over time, certain standards were
developed, and these are unlikely to change in the foreseeable future.

– For example, if you want a specific type, like bold, you should
use the <b> elements, but the <strong> element will give you
the same effect because most browsers will interpret <strong>
as <b>.

■ The table on the next page lists the most commonly used logical
elements.
 Logical Text Formatting
Element Name Formatting Style
<cite>...</cite> Defines a citation
<code>...</code> Presents computer code examples
<em>...</em> Emphasis. In most browsers, this is italics
Strong importance (semantic). Default rendering
<strong>...</strong>
often bold.
Provides a logical inline grouping with no
<span>...</span>
predefined look.
Defines the abbreviation of text.
<abbr>...</abbr> Example:
<p> <abbr title=“Break Line”>br</abbr> <p>
• An acronym is made of the initial letters of some words
([Link] Mark-up Language => HTML),
• The <acronym> tag was used in HTML 4 .
• An acronym or abbreviation should be marked up with
<acronym>... </acronym> the <abbr> tag
Example:
<p>The <abbr title="World Health
Organization">WHO</abbr> was founded in 1948.</p>
Logical Text Formatting – Example
Logical Text Formatting – Example
 Character Entities In HTML
■ Certain characters in HTML have special meaning to parser, like less than < and greater
than >.
– These characters (> and <) identify the beginning and ending of a tag,
– so if you want to add these characters as literal values, you must use the character
entity code for them.
■ A character entity is written in the following syntax:
– &code;
■ It begins with an ampersand (&) character,
■ then the code for the entity,
■ then a semicolon (;).
■ Hundreds of symbols can be referenced and included on Web pages using entities.
– Some of the more popular symbols can be referenced by their abbreviations, like
less than (lt) and greater than (gt), but they can also be referenced using their
decimal value in the ASCII Table.
– Character references can be named (e.g., &lt;) or numeric (e.g., &#60; or
&#x3C;).
■ Some of the most common character entity codes are shown in the table on the next page.
– Named Character Entities
– Numeric Character Entities
 Some Common Character Entity
Codes
Symbol Description HTML Code
> Greater than &gt; or &#62;

< Less than &lt; or &#60;

® Trademark &trade; or &#174;

© Copyright &copy; or &#169;

¢ Cent sign &cent; or &#162;

Non-breaking space &nbsp; or &#160