HTML
- Hypertext Markup Language
- markup language that web browsers use to
interpret and compose text, images, and
other material into web pages
- plain text, not compiled and may read by
humans
.htm or .html
- file extension for an HTML file
Tim Berners-Lee
- 1989, wrote a memo proposing an Internet
based hypertext system
- specified HTML and wrote the browser and
server software in late 1990
HTML Tags
- late 1991, document that was first
publicly available description of HTML
HTML 2.0
- published on 1995
HTML 3.2
- published on January 14, 1997; first
version
developed and standardized
exclusively by the W3C
HTML 4.0
- published on December 18, 1997; offers
three variations: strict, transitional,
frameset
- reissued on April 24, 1998, with minor
edits without incrementing the version no.
HTML 4.01
- published on December 24, 1999
XHTML 1.0
- released on January 26, 2000FINALS REVIEWER
CC 201 – INTRODUCTION TO COMPUTING
HTML5
- published on October 28, 2014. 5.1 and 5.2
versions were released in 2016 and 2017
respectively
HTML is Primarily Composed of Tags:
Declaration
- lets document to be classified which type
of document is going to be read by a web
browser. <!DOCTYPE>
Elements
- comprise the most part of html; defined
by a starting tag and ends with a closing
tag. <p>My first paragraph</p>
Attributes
- provide additional information about an
element. name=”value”
href Attribute
- HTML links are defined with <a> tag.
The link address is specified in href
attribute:
<a href=”www.w3schools.com”>Link</a>
src Attribute
- HTML images are defined with <img>
tag. The filename is specified in src
attribute: <img src=”image1.jpg”>
width and height
- specified in pixels by default:
<img src=”image1.jpg”
width=”500”
height=”600”>
alt Attribute
- specifies an alternative text to be
used if an image cannot be displayed:
<img src=”image1.jpg” alt=”ImageTxt”>
style Attribute
- specifies the styling of an element,
like color, font, size etc.
<p style=””>Paragraph</p>
lang Attribute
- the language is declared with the
lang attribute; important for
accessibility applications and search
engines. <html lang=”en-US”>FINALS REVIEWER
CC 201 – INTRODUCTION TO COMPUTING
title Attribute
- the value of it will be displayed as
a tooltip when you mouse over the
paragraph.
<p title=”I’m a Tooltip”>This is
paragraph</p>
<body>
- where all other elements are placed and
to be displayed
<head>
- where the metadata has to be encoded
METADATA
- data (information) about data; will not
be displayed on the page but will be machine
parsable; typically used to specify page
description, keywords, author, last
modified, etc. <meta>
Sandwich Structure - HTML has this structure, any texts encased
inside of an element are independent,
however, elements can be inside of elements.
<b><u><h1>Hello World!</h1></u></b>
HTML5
New Tags:
<section>
- defines sections of pages
<header>
- defines the header of a page
<footer>
- defines the footer of a page
<nav>
- defines the navigation on a page
<article>
- defines the article or primary content on
a page
<aside>
- defines extra content like a sidebar on a
page
<figure>
- defines images that annotate an article
New Inline Elements:
<mark>
- indicates content that is marked in some
fashion
<time>
- indicated content that is a time or date
<meter>
- indicates content that is a fraction of a
known range such as disk usage
<progress>
- indicates the progress of a task towards
completion
New Dynamic Pages Support:
Context menus
- supports the creation and use of context
menus within web pages and applications
href
- allows to use a tag with scripts and in
web applications without needing a place to
send that anchor
async attribute
- added to the script tag to tell the
browser that the script should be loaded
asynchronously so that it doesn’t slow down
the load and display the rest of the page
<details>
- provides details about an element like
tooltips in non-web applications
<datagrid>
- creates a table that is built from a
database or other dynamic source
<menu>
- allowing to create a menu system on web
pages
<command>
- defines actions that should happen when a
dynamic element is activated
New Form Types:
- datetime
- datetime-local
- date
- month
- week
- time
- number
- range
- email
- url
New Elements:
<canvas>
- gives a drawing space in JavaScript on web
pages; can add images or graphs to tooltips
or create dynamic graphs on web pages, built
on the fly
<video>
- add video to web pages
<audio>
- add sound to web pages
- CSS -
CSS
- Cascading Style Sheet
- language that describes the stye of an
HTML document
Two Parts in CSS
- Selector and Declaration
Two Parts in Declaration - property and value
Three Types of Attaching CSS:
Inline Style
- style rules can be specified right in an
HTML tag, with style=”style rules”
<h1
style=”font-
font
size:50px;
font-family:arial”>My
First
Heading</h1>
Embedding Style
- style sheets can be embedded into the
element of HTML documents; the style sheet
is placed inside a <style> tag
<style type=”text/css”>
h1 {
font-family:arial;
text-size:50px;
</style>
External Style
- style used to refer an independent css
source code file, usually with a .css file
extension in an html document
<link rel=”stylesheet”
type=”text/css”
href=”mystyle.css”>
Knowt
Note
Studied by 44 people
