Scribd
Upload
44 views43 pages

Lecture 3

Uploaded by

IRFAN MUGHAL
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
44 views43 pages

Lecture 3

Uploaded by

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

CYC475 - Topics in Cyber

Security (Web Technologies


and Programming)
WEEK 1 & 2: HTML
NAJLA RAZA – LECTURER
COMSATS UNIVERSITY, ISLAMABAD CAMPUS
Lecture Contents

 HTML: Introduction, History, HTML and XHTML,


 HTML Elements,
 Block Level vs Inline Elements,
 HTML Lists and Tables
 HTML div and span
 HTML Validator.
 HTML layout design
 HTML Semantic elements
 HTML 5 elements
HTML

 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

 The <!DOCTYPE> declaration represents the document type and helps


browsers to display web pages correctly.
 It must only appear once, at the top of the page (before any HTML
tags).
 The <!DOCTYPE> declaration is not case sensitive.
 The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
HTML Element

 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

 Attributes Tell Us More About Elements


 Attributes provide additional information about the contents of an element.
 They appear on the opening tag of the element
 and are made up of two parts: a name and a value, separated by an equals
sign.
Attributes
Title

This contains information that are shown on top


of the page
Body & Title
Headings

 HTML has six "levels" of headings:


 <h1> is used for main headings
 <h2> is used for subheadings
 If there are further sections under the subheadings then the <h3> element
is used, and so on...
Paragraph

 A paragraph consists of one or more sentences that form a kind of


dialogue.
Bold and Italics

 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

 Every HTML element has a default display value, depending on what


type of element it is.
 The two most common display values are block and inline.
Block-level elements

 A block-level element always starts on a new line, and the browsers


automatically add some space (a margin) before and after the element.
 A block-level element always takes up the full width available (stretches
out to the left and right as far as it can).
 Two commonly used block elements are: <p> and <div>.
 The <div> element defines a division or a section in an HTML
document.
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most
populous city in the United Kingdom, with a metropolitan area of
over 13 million inhabitants.</p>
</div>
Block-level elements

Below is a list of all the block-level elements:


Inline elements

 An inline element does not start on a new line.


 An inline element only takes up as much width as necessary.
 This is a <span> element inside a paragraph.

<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

 There are two kinds of lists in HTML


 Ordered list: with <ol> tag and <li> tags for list items
 Unordered list: with <ul> tag and <li> tags for list items
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

 The <div> element is used as a container for other HTML elements.


 The <div> element is by default a block element, meaning that it takes
all available width, and comes with line breaks before and after.
HTML <span> element

 The <span> tag is an inline container used to mark up a part of a text,


or a part of a document.
 The <span> tag is easily styled by CSS or manipulated with JavaScript
using the class or id attribute.
 The <span> tag is much like the <div> element, but <div> is a block-
level element and <span> is an inline element.
HTML Layout Design

 UI designers normally make website designs in some tools like Figma.


 Translating that design into a web page is the job of a front end
developer.
 He/she needs to identify the layout, sections, and various css properties
involved in that design.
 Have a look at some websites and see how you can design them.
Activity

 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

 A semantic element clearly describes its meaning to both the browser


and the developer.
 Examples of non-semantic elements: <div> and <span> - Tells
nothing about its content.
 Examples of semantic elements: <form>, <table>, and <article> -
Clearly defines its content.
HTML Semantics

Why Semantic Elements?


According to the W3C: "A semantic Web allows data to be shared and
reused across applications, enterprises, and communities."
HTML 5

 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

 Rich media experiences without plugins:


 HTML5 inherently supports rich media through elements such as <video> and
<audio>.
 Some disadvantages of plugins such as Java and Flash include poor performance,
fewer user options, security flaws, and lack of search engine visibility.
 XML compatibility:
 XHTML5 code can be written using the ‘stricter’ XML syntax.
 This is useful for developers who prefer the neatness offered by well-formed XHTML,
including quoted attribute values, lowercase element names, and the closure of all
elements.
 In cases where code is expected to work with other XML applications, HTML5
documents must be served as XML.
HTML 5

 Design & content separation:


 HTML5 discourages non-meaningful markup that is only intended to help
the browser visualize stuff (think declarations for font, text color, text
alignment, and so on).
 This standard has deprecated many elements that enabled such
visualization, and the few supported features display ‘not a recommended
practice’ warnings.
HTML 5

 Accessibility and design responsiveness:


 Early iterations of HTML were not seamlessly compatible with modern
technology’s numerous screen sizes and aspect ratios.
 This includes mobile phones, tablets, e-readers, assistive technologies such
as text-to-speech converters, screen readers that suppress styling while
boosting text magnification and contrast, and braille interpreters.
 These technologies were held back by markup that attempted to ‘hard-code’
styling and design into page content
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

 The HTML <abbr> tag defines an abbreviation or an acronym, like


"HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".
 Marking abbreviations can give useful information to browsers,
translation systems and search-engines.
HTML Entities
Activity

 Identify the divisions/tags in your previously designed website that can


be converted to semantic tags. Redesign using semantic tags.

You might also like