HTML. The HyperText Markup Language

What is HTML ?

the publishing language of the World Wide Web
WWW – is a system of interlinked hypertext documents accessed via the Internet
is a mark-up language (i.e. its elements, HTML tags, “mark” text, instruct interpreter how to display text and also, “hyper-links” one document to another)
created by Tim Berners-Lee at CERN (1990)
HTML specification is standardized and maintained by World Wide Web Consortium (w3c.org)

What is HTML ?

HTMl = document semantics
CSS = document presentation
Javascript = document behavior

History of HTML

1980: Tim Berners-Lee proposed ENQUIRE at CERN for sharing documents
1991: Tim Berners-Lee releases first publicly available description of HTML (has 20 elements)
1993: Tim Berners-Lee and Dan Connolly wrote the Internet draft of first HTML specification
1995: RFC 1866, HTML 2.0
January 1997: HTML 3.2 standardized by W3C
December 1997: HTML 4.0 by W3C
1999: HTML 4.01 by W3C
2008: HTML 5 working draft by W3C

History of HTML (cont.)

October 2014 – HTML 5 was published as W3C Recommendation
November 2016 - HTML 5.1 was published as W3C Recommendation
December 2017 - HTML 5.2 was published as W3C Recommendation

Elements of HTML

the elements are called tags
the general form of a tag is:
<tag-name attribute=“val” … attribute=“val” event=“..function..”> … text content … </tag-name>
tags tell the browser how the “content text” should be displayed in the web page
attribute specifies characteristics of the tags
event (you will see later, in the Javascript course)
tag names are not case sensitive
defines a comment

First, "Hello world", HTML document

					
<!doctype html> 
<html> 
	<head>
		<title>Hello world page</title>
	</head>
	<body>
		Hello World!
	</body>
</html>

Main HTML tags

an HTML document has an hierarchical structure
<html> - is the root of the html document
<head> - contains metadata about the document, action-scripting (see javascript), styles (see CSS) and general information referenced in the whole document
<body> - contains the actual text of the document

Global attributes

Core attributes:
- class – specifies a classname for the element (CSS)
- id – specifies an ID for the element
- style – specifies an inline style for the element (CSS)
- title – specifies extra information for the element (tooltip text)
- contenteditable – specifies if content is editable(true/false)
- draggable – if element can be dragged and dropped (true/false)
- hidden – if element is hidden
Language attributes:
- dir=“ltr | rtl” – specifies text direction for the contents of the element
- lang – specifies a language code for the contents of the element
- translate –specify whether content should be translated if page is localized
Keybord attributes:
- accesskey – specifies a keyboard shortcut to access the elem.
- tabindex – specifies the taborder of the element

Metadata tags

<title> - provides a title for the document
Ex.:


	<head>
		<title>My title</title>
	</head>
	…

<base> - specifies a default URL (Uniform Resource Locator) and a default target for all the links on a page
<base href=“..URL..” target=“_blank | _parent | _self | _top | framename”>
Ex.:
```
 
		<head>
			<base href=http://www.cs.ubbcluj.ro/~forest>
			<base target=“_blank”>
		</head>
	
```

Metadata tags (2)

<link> - defines the relationship between a document and an external resource; appears in the head section, any number of times
Attributes:
- href - location of the linked document
- rel – relationship between current document and linked document: alternate, appendix, bookmark, chapter, contents, copyright, glossary, help, home, index, next, prev, section, start, stylesheet, subsection
- rev - relationship between linked document and current document; values the same as above
- type – MIME type of the linked document
- target – where the document is to be loaded

Ex.: for including a stylesheet

 
	<link rel=“stylesheet” type=“text/css” href=“theme.css”>

Metadata tags (3)

 
		<meta name=“description” content=“Simple html page”>
		<meta name=“author” content=“Adrian Sterca”>
		<meta name=“keywords” content=“html, www”>
		<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1“>

 
	<style type="text/css">
	h1 {color:red}
	p {color:blue}
	</style>

Section tags

<body> - defines the document body which contains all the text, hyperlinks, tables, images etc.
Deprecated attributes: (use stylesheets instead) alink – color of an active link; rgb(x,x,x), #xxxxxx, colorname bgcolor – background color; values as above link – default color for unvisited link; values as above text – color of the text; values as above vlink – color of visited links; values as above background = URL – background image
<head> - defines the head section of the document; can contain tags: <base>, <link>, <meta>,<script>,<style>,<title> (required)

Section tags (2)

<div> - defines a section in an HTML file; groups together elements which will be formatted using the same style (in HTML5 has no special meaning at all)
<frameset> - defines a set of frames; mutually exclusive with <body>
Attributes: cols = pixels | % | * - the number and size of columns in a frameset rows = pixels | % | * - the number and size of rows in a frameset Ex.:
```
 
	<frameset cols="25%,*,25%">
	  <frame src="frame_a.htm">
	  <frame src="frame_b.htm">
	  <frame src="frame_c.htm">
	</frameset> 
	
```
<frame> and <iframe> - defines frames (windows) within a frameset or in a document

Section tags (3)

<frame> - a frame (window) within a frameset
Attributes:
frameboder = 0 | 1
marginheight = pixels (top and bottom margins of a frame)
marginwidth = pixels (left and right margins of a frame)
name – name of a frame
noresize = “noresize”
scrolling = “yes | no | auto”
src = “URL” - URL of the document to show in a frame
<iframe> - an inline frame that contains another document within the current document
Attributes: align, frameborder, height, width, marginwidth, marginheight, name, scrolling, src

Section tags (4)

<h1>..<h6> - defines headings
- <h2>This is a heading2</h2>
- search engines use headings to index the structure of your web page
- browsers automatically add an empty line before and after a heading
<p> - defines a paragraph
- <p>This is a paragraph</p>
- html documents are divided into paragraphs
- browsers automatically add an empty line before and after a paragraph

Text-level appearance tags

<b> - bold
<i> - italic
<em> - emphasized text
<strong> - strong text
<s> - strikethrough text
<u> - underlined text
<del> - deleted text
<sub> and <sup> - subscript and superscript text
<pre> - preformatted text (text is displayed exactly as is written)
<small> - small text
<big> - big text

Grouping tags

Definition lists: <dl>, <dd>, <dt>

Ex.:

 
	<dl>
    	<dt>Name1</dt>
    	<dd>Name1 is something1</dd> 
    	<dt>Name2</dt>
    	<dd>Name2 is something2</dd> 
    	<dt>Name3</dt>
    	<dd>Name3 is something3</dd> 
	</dl>

Grouping tags (2)

Ordered list: <ol>, <li>

Ex.:

 
	<ol>
	    <li>Ferrari</li>
	    <li>Audi</li>
	    <li>BMW</li>
	    <li>Ford</li>
	</ol>

Grouping tags (3)

Unordered list: <ul>, <li>

Ex.:

 
	<ul>
   		 <li>Ferrari</li>
		 <li>Audi</li>
		 <li>BMW</li>
		 <li>Ford</li>
	</ul>

Grouping tags (4)

Drop-down list: <select>, <option>

Ex.:

 
<select>
    <option value="ferrari">Ferrari</option>
    <option value="audi">Audi</option>
    <option value="bmw">BMW</option>
    <option value="ford">Ford</option>
</select>

Grouping tags (5)

definition lists: dl, dt, dd

Ex.:

 
<dl>
       <dt>Blanco tequila</dt>
       <dd>The purest form of the blue agave spirit...</dd>      
       <dt>Reposado tequila</dt>
       <dd>Typically aged in wooden barrels for between two and eleven months...</dd> 
</dl>

Image tag

<img> - embeds an image into html document
Ex.:

  
	<img src=“z.jpg” alt=“Alternative Text”>
	<img src=http://www.google.com/t.jpg>

Required attributes: src, alt
Optional attributes:
- align = top | bottom | middle | left | right
- border = pixels
- height = pixels | %
- width = pixels | %
- hspace = pixels
- vspace = pixels

Anchor tag

<a> - links current document to another document or a section from the current document
Ex.:
```
 
		1) <a href=http://www.google.com>google</a> 
		2) <a name=“test”>some text</a>
	
```
1) – for linking this html document to an external document (e.g. www.google.com)
2) – for creating a bookmark inside the document; it is not displayed by the browser, it is invisible; this bookmark can be referenced by:
URL_of_this_document#test
ex: http://www.google.com/index.html#test

Anchor tag (2)

Attributes:
- href: the URL of the destination of the link
- name: the name of the anchor (bookmark)
- rel: relationship between the current document and the linked document
- rev: relationship between the linked document and the current document
- shape: the shape of the link (default, rect, circle, poly)
- target: where to open the linked document (_blank, _parent, _self, _top, framename)

Table tag

 
	<table border="1">
	<tr>
		<th>Professor</th>
		<th>Course</th>
		<th>Year of study</th>
	</tr>
	<tr>	
		<td>John Boyd</td>
		<td>Operating Systems</td>
		<td>2</td>
	</tr>
	<tr>	
		<td rowspan="2">Frank Black</td>
		<td>Web Programming</td>
		<td>3</td>
	</tr>
	<tr>	
		<td>Computer Networks</td>
		<td>3</td>
	</tr>
	<tr>	
		<td>Jack O'Neil</td>
		<td>Satellite Communications</td>
		<td>3</td>
	</tr>
	</table>

Table tag (2)

<table> - defines a table
<th> - defines a table header cell (bold and centered)
<tr> - defines a table row
<td> - defines a table data
Attributes:
- for <table>: border (pixels), cellpading (pixels), cellspacing (pixels), frame, rules, summary (text), width (pixels,%)
- for <th> and <td>: abbr (text), align (left,right,center,justify,char), axis, bgcolor - deprecated, char (character), charoff (number), colspan (number), headers, rowspan (number), height – deprecated, width – deprecated, scope (row,rowgroup,col,colgroup), valign (top,middle,bottom,baseline)
- for <tr>: align, bgcolor - deprecated, char, charoff, valign

Script tag

for inserting action scripting (see javascript)

Ex.:

 
	<script type=“text/javascript”>
		… javascript code …
	</script>

attributes:
- src: URL of the script
- defer: execution of the script should be delayed until the page has loaded
- charset: specifies encoding used in an external file

Embedded content tags

<object> - including objects like images, audio, video, Java applets, ActiveX, pdf, flash

Ex.:

 
  	<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" width="100" height="50">
  		<param name="BorderStyle" value="1" />
  		<param name="MousePointer" value="0" />
  		<param name="Enabled" value="1" />
  		<param name="Min" value="0" />
  		<param name="Max" value="10" />
	</object>

Other tags

<br> - moves to the next line
<hr> - draws a horizontal row

New structural tags in HTML 5

HTML 5 – focus on semantics of elements
<div> should be used as the last resort, if no other structural element is suitable
<main>
<section>
<article>
<footer>
<header>
<aside>
<nav>

<main> tag

represents the main content of the <body> of the document
includes content that is unique to that document and excludes data that is repeated across a set of documents (e.g. header, footer, navigational links, copyright)
is no sectioning element
there should be one visible main element in the document

<section> tag

represents a generic section of a document
groups thematic content

ex:

 
<section>
	<p>Web programming studies html, css and js</p>
	<p>Tim Berners-Lee invented the www</p>
</section>
<section>
	<p>Operating systems are essential software for computers</p>
	<p>OS example: Unix, Linux, MacOS</p>
</section>

<article> tag

represents complete, or self-contained, composition in a document

Ex.:

 
<article>
	HTML 5 was standardized in late 2014. It includes new structural-semantic elements like ‘article’ and ‘section’
	…
</article>

<aside> tag

represents content that is not in the main flow of the document

<footer>, <header> tags

 						
<header>
	Welcome to the page of A. Sterca.
</header>


<footer>
	<a href="../">Back to index...</a>
</footer>

<nav> tag

a section with navigational links.

 
<nav>
	<a href=“#”>Home</a>
	<a href=“#”>Users</a>
	<a href=“#”>Actions</a>		
</nav>

<svg>,<audio>,<video> tags

 
<svg width="200" height="250"> 
	<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
</svg>

 
  <video width="320" height="240" controls>
  	<source src="movie.mp4" type="video/mp4">
  	<source src="movie.ogg" type="video/ogg">
  </video>

<figure>,<figurecaption> tags

 	
<figure> 
	<img src="bubbles-work.jpg"> 	<figcaption>Bubbles at work</figcaption>
</figure>

References

http://www.w3schools.com
http://www.w3c.org

HTML. The HyperText Markup Language

What is HTML ?

What is HTML ?

History of HTML

History of HTML (cont.)

Elements of HTML

First, "Hello world", HTML document

Main HTML tags

Global attributes

Type of tags

Metadata tags

Metadata tags (2)

Metadata tags (3)

Section tags

Section tags (2)

Section tags (3)

Section tags (4)

Text-level appearance tags

Grouping tags

Grouping tags (2)

Grouping tags (3)

Grouping tags (4)

Grouping tags (5)

Image tag

Anchor tag

Anchor tag (2)

Table tag

Table tag (2)

Script tag

Embedded content tags

Other tags

New structural tags in HTML 5

<main> tag

<section> tag

<article> tag

<aside> tag

<footer>, <header> tags

<nav> tag

<svg>,<audio>,<video> tags

<figure>,<figurecaption> tags

References