html presented by: ondřej procházka course: distributed data processing mentor: rafał michalski
TRANSCRIPT
HTMLPresented by: Ondřej Procházka
Course: Distributed Data ProcessingMentor: Rafał Michalski
Content• What is HTML, how it works
• What are tags, how are they implemented
• Overview of major HTML elements
• Evolution … history ~ present ~ future
What is HTML?• Stands for: HyperText Markup
Language
• It is the code behind your webpage
• Non-proprietary markup language
• ISO/IEC international standard
Hypertext
Markup
Language
How does it work?• It is just a simple text containing a content
surrounded by words in angle brackets
• The brackets contain pre-defined tags that can format text, create hyperlinks etc.
• We save this simple text with a .html or .htm extension and open it in a browser
What are the TAGS?• Tags are simple pre-defined instructions
• Tags tell the browser how to display a page
• Tags are containers that describe a certain type of element, such as a paragraph, font
• Tags are not case sensitive
How do we use TAGS?
This is my text!Let me show you
how it works!
<p>
</p>
<p align="center">
Tag Attribute Value
How does a page look?
<html>
</html>
<head>
</head><title>Hello DDP!</title>
<body>
</body><p align="center">This my text!</p>
Head elements<meta>
- specifies additional metadata (author, keywords,..)
<base>- specifies a base URL for all the links in a page
<link>- specifies links to other documents (CSS,..)
<script>..</script>- adds a JavaScript or other scripts
<style>..</style>- specifies the style of a document
Presentational markup
<b>..</b><i>..</i><big>..</big><small>..</small>*<u>..</u>*<font [color=color] [size=size]
[face=face]>..</font>
*Only valid in the Transitional and Frameset variants of HTML 4.01!
Block elements<p>..</p>
- Creates a paragraph, most common block level el.
<hr>- Inserts a horizontal rule
<h1>..</h1> ** h1, h2, h3, .. h6- Section headings at different levels
<dl>..</dl>, <dt>..</dt>, <dd>..</dd><ol>..</ol>, <ul>..</ul>, <li>..</li>
- tags for creating lists.. “definition list, term, descr.”
Block el. - Tables<table>..</table>
- Creates a table
<tr>..</tr>- Creates a row in a table
<th>..</th>- Creates a table heading
<td>..</td>- Creates a table data cell
…colgroup, col, caption, thead, tbody, tfoot
Other elements<a>..</a> <a
href=“URL”>..</a>- Creates a hyperlink
<img>- Inserets an image, src=“..” defines the source
<Br>- Specifies a line-break
<div>..</div>- defines a division/section in a document- usually used to group block-elements to format ..them with style
Omitted elements• Frame tags
• Forms
• Non-standard HTML tags– Blink, marquee, blackface, etc.
• Commenting<!-- A Comment -->
Additions to HTML• Cascading Style Sheets (CSS)
– allow to set specific styles, formating for your page
• JavaScripts (JS)– scripting language adding interactivity to your page
• Plug-ins– Flash, QuickTime, Acrobat or streaming audio,
video
Evolution #1 • Roots date back to 1980~Tim Berners-
Lee– project ENQUIRE, first hypertext system, for CERN
• 1989 Tim submitted a proposal for an Internet-based hypertext system
• 1991 first publicly available description of HTML in a document “HTML Tags”
Evolution #2• 1993 proposal for a specification,
draft "Hypertext Markup Language (HTML)"
• 1995 new specification - HTML 2.0
• 1997 HTML 3.2, HTML 4.0 (by W3C)
• 1999 HTML 4.01– In 2000 ISO/IEC int. standard - HTML 4.01 Strict
Evolution #future• HTML standard is constantly evolving
• HTML 5 published as a Working Draft in January 2008
• Work done by W3C (timeframe ~2010 Q3)
HTML 5?• Final death of the <font> element
• Content-editable API
• New elements– <nav>– <header> and <footer> – <audio> and <video> – <figure> and <legend>
Sources• http://www.w3schools.com/• http://www.w3.org/• http://www.devx.com/• http://www.wikipedia.com/• http://www.yourhtmlsource.com/• http://computer.howstuffworks.com/
Thank you foryour attention!