Lecture 3
Lecture 3
HTML
Stands for hypertext markup language
Hypertext: text that has reference to other text
HTML is not a programming language. It is a markup language.
A markup language is a text-encoding system which specifies the
structure and formatting of a document and potentially the
relationships among its parts.
A markup language is both machine and human readable
HTML history
HTML was created by Berners Lee
in late 1991.
HTML 2.0 was the first standard
HTML specification which was
released in 1995.
XHTML was developed to make
HTML more extensible and
flexible to work with other data
formats (such as XML). In
addition, browsers ignore errors in
HTML pages and try to display the
website even if it has some errors
in the markup. So, XHTML comes
with a much stricter error
handling.
A simple HTML
document
• The <!DOCTYPE html> declaration
defines that this document is an HTML5
document
• The <html> element is the root element
of an HTML page
• The <head> element contains meta
information about the HTML page
• The <title> element specifies a title for
the HTML page (which is shown in the
browser's title bar or in the page's tab)
• The <body> element defines the
document's body, and is a container for
all the visible contents, such as
headings, paragraphs, images,
hyperlinks, tables, lists, etc.
• The <h1> element defines a large
heading
• The <p> element defines a paragraph
The <!DOCTYPE> Declaration
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Some HTML elements have no content (like the <br> element). These
elements are called empty elements. Empty elements do not have an end
tag!
Never skip the end tag, though it may not cause an error.
HTML is not case sensitive <p> and <P> are the same.
Attributes
Bold
By enclosing words in the tags <b> and </b> we can make characters
appear bold.
Italic
By enclosing words in the tags <i> and </i> we can make characters
appear italic.
Example
Line Break
Line Break
Just like <p></p> the line break <br /> breaks line and starts
new line
Example
<p>The Earth<br />gets one hundred tons heavier
every day<br />due to falling space dust.</p>
Horizontal Rule
Just like <br /> it separates lines by placing a solid line in
between paragraphs
<p>Venus is the only planet that rotates
clockwise.</p>
<hr />
<p>Jupiter is bigger than all the other planets
combined.</p>
Blockquote
Blockquote
The <blockquote> tag specifies a section that is quoted from another source.
Browsers usually indent <blockquote> elements.
Block level and inline elements
<p>My mother
has <span style="color:blue;font-weight:bold;">blue</span> eyes and
my father has <span style="color:darkolivegreen;font-
weight:bold;">dark green</span> eyes.</p>
Inline elements
Lists
Definition lists:
HTML definition lists is used to defines a description list, it is
represented by using <dl> tag.
It is used along with <dt> and <dd>.
In HTML Description list or definition list displays its elements in
definition form in the dictionary where if we define a description list it
will give a description of each item in the list by using the following
tags.
Tables
The W3C Markup validation service
The Markup Validation Service is a validator by the World Wide Web Consortium
that allows Internet users to check pre-HTML5 HTML and XHTML documents for
well-formed markup against a document type definition.
Markup validation is an important step towards ensuring the technical quality of
web pages.
https://validator.w3.org/detailed.html
HTML <div> element
Create a website that gives information about your course. The website
should have the following navigation menu:
Home
Course Details
Instructor details
Students Details
Think about the layout of your website and prepare a wireframe design
on a page. Your website should include:
Headings, paragraphs, links, images, lists and tables with navigation.
You can link Comsats website and other social media links in the footer.
HTML Semantics
Semantic Web
In previous versions of HTML common structural elements such as navigation
menus, page headers, and main content sections were not semantically
differentiated. Instead, they all used the <div> tag.
HTML5 addresses this with a host of new semantic elements, such as
<header>, <main>, <section>, <nav>, <aside>, <article>, and <footer>.
Additionally, new inline semantic elements such as <address> and <time>
help online services such as search engines quickly locate relevant data on a
page.
HTML 5
APIs:
HTML5 has made a great leap by defining numerous new APIs that simplify
communication with applications.
It introduces APIs for functionality that earlier needed plugins or customized
code, including web storage, drag and drop, geolocation, and microdata.
HTML Quotation and Citation
Elements
HTML Abbreviation