Embed Size (px)
Citation preview
HTML 5The past, the present, the future
Telerik School Academyhttp://academy.telerik.com
HTML, CSS and JavaScript
Table of Contents Hypertext Markup Language HTML Concepts HTML Document Structure HTML Common Elements Section Elements HTML Tables Semantic Structural Tags
2
Hypertext Markup Language
3
Hypertext Markup Language
HTML – Hyper Text Markup Language A notation for describing
document structure (semantic markup)
formatting (presentation markup)
Looks (looked?) like: A Microsoft Word document
The markup tags provide information about the page content structure
A HTML document consists of many tags
4
Creating HTML Pages An HTML document must have an .htm or .html file extension
HTML files can be created with text editors: NotePad, NotePad ++, Sublime Text
Or HTML editors (WYSIWYG Editors): Microsoft WebMatrix Microsoft Expression Web Microsoft Visual Studio Adobe Dreamweaver
5
HTML – Past, Present, Future
1991 – HTML first mentioned – Tim Berners-Lee – HTML tags
1993 – HTML (first public version, published at IETF)
1993 – HTML 2 draft 1995 – HTML 2 – W3C 1995 – HTML 3 draft 1997 – HTML 3.2 – “Wilbur” 1997 – HTML 4 – ”Cougar” – CSS 1999 – HTML 4.01 (final) 2000 – XHTML draft 2001 – XHTML (final) 2008 – HTML5 / XHTML5 draft 2011 – feature complete HTML5 2022 – HTML5 – final specification
6
HTML TerminologyTags, Attributes and Elements
7
HTML Terminology Concepts in HTML
Tags Opening tag and closing tag
The smallest piece in HTML
Attributes Properties of the tag
Size, color, etc…
Elements Combination of opening, closing tag
and attributes
HTML Tags Tags are the smallest piece in HTML Document Start with "<" and end with ">"
Two kinds of tags Opening
Mark the start of an HTML element
Closing Mark the end of an
HTML element
Start in "</"9
<html><body> <h1>Hello Pesho!</h1></body></html>
Opening tag
Closing tag
Opening tag
Opening tag
Closing tag
Closing tag
Attributes Attributes are properties of HTML Elements Used to set size, color, border, etc…
Put directly in the tags
Has value surrounded by " " or ' ' The value is always a string
10
<!-– makes a hyperlink to Google --><a href="http://google.com"> go to Google</a>
<!-– makes a horizontal line --><hr width="95%" size="3px"/>
<!-– adds an image in the web page --><img src="images/SEB-Ninja.png"/>
Some tags don't have closing tag
Some tags don't have closing tag
Most Common Attributes
There are some attributes that are common for every HTML element Id, class, name, style
And some attributes are specific For example the attribute src of the img element Shows the path to the image to be
shown
11
HTML Elements
HTML Elements are combination of tags and attributes Opening tag with some or none
attributes and a closing tag
12
<a href="http://google.com"> go to Google</a>
<html>…</html>
HTML Terminology
Live Demo
13
HTML Document Structure
HTML Document, Doctype, Head, Body
14
HTML Document Structure
Some elements are essential to each HTML Document:
html, head, body, doctype
The html element Used to mark the beginning and
ending of a HTML document
All the content of the web page is inside this tag
15
<html> …</html>
Head Element The head tag contains markup that is not visible to the user (i.e. the person using the browser) But helps the browser to render
correctly the HTML document
What is in there? Styles, scripts
Declare encodings
Etc..
The title tag - the text in the tab of a browser
16
Body Element and Doctype
body element contains all the visible to the user markup Headings, text, hyperlinks, images,
etc…
Textboxes, sliders, buttons…
Doctype is kind of the validator of the page Tells the browser in which version
of HTML the page is written
HTML 5 Doctype17
<!DOCTYPE html>
HTML Document Structure
Live Demo
18
HTML Common Elements
Used in 90% of all the sites
Text Formatting Text formatting tags modify the
text between the opening tag and the closing tag Ex. <b>Hello</b> makes "Hello" bold<b></b> bold
<i></i> italicized
<u></u> underlined
<sup></sup> Samplesuperscript
<sub></sub> Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
20
Many of the formatting tags are deprecated Use CSS instead
Some Simple Tags Hyperlink Tags
Image Tags
Text formatting tags
21
<a href="http://www.telerik.com/" title="Telerik">Link to Telerik Web site</a>
<img src="logo.gif" alt="logo" />
This text is <em>emphasized.</em><br />new line<br />This one is <strong>more emphasized.</strong>
Headings and Paragraphs
Heading Tags (h1 – h6)
Paragraph Tags
Sections: div and span
22
<p>This is my first paragraph</p><p>This is my second paragraph</p>
<h1>Heading 1</h1><h2>Sub heading 2</h2><h3>Sub heading 3</h3>
<div style="background: skyblue;"> This is a div</div>
a. Appleb. Orangec. Grapefruit
Ordered Lists: <ol> Tag Create an Ordered List using <ol></ol>:
Attribute values for type are 1, A, a, I, or i
23
1. Apple2. Orange3. Grapefruit
A. AppleB. OrangeC. Grapefruit
I. AppleII. OrangeIII. Grapefruit
i. Appleii. Orangeiii. Grapefruit
<ol type="1"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li></ol>
Unordered Lists: <ul> Tag
Create an Unordered List using <ul></ul>:
Attribute values for type are: disc, circle or square
24
• Apple
• Orange
• Pear
o Apple
o Orange
o Pear
Apple
Orange
Pear
<ul type="disc"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li></ul>
Definition lists: <dl> tag
Create definition lists using <dl> Pairs of text and associated
definition; text is in <dt> tag, definition in <dd> tag
Renders without bullets
Definition is indented 25
<dl><dt>HTML</dt><dd>A markup language …</dd><dt>CSS</dt><dd>Language used to …</dd>
</dl>
HTML Common Elements
Live Demo
Section ElementsThe <div> and The <span>
The <div> Tag <div> creates logical divisions within a page
Block element
Used with CSS
Example:
28
<div style="font-size:24px; color:red">DIV example</div>
<p>This one is <span style="color:red; font-weight:bold">only a test</span>.</p>
<DIV>Live Demo
The <span> Tag Inline style element Useful for modifying a specific portion of text Don't create a separate area
(paragraph) in the document
Mainly used to style parts of a text
30
<p>This one is <span style="color:red; font-weight:bold">only a test</span>.</p>
<p>This one is another <span style="font-size:32px; font-weight:bold">TEST</span>.</p>
<SPAN>Live Demo
HTML Tables
HTML Tables Tables represent tabular data
A table consists of one or several rows
Each row has one or more columns Tables are comprised of several core tags: <table></table>: begin/end table
definition <tr></tr>: create a table row <td></td>: create tabular data (cell)
Tables should not be used for layout Use CSS floats and positioning
styles instead
33
Simple HTML Tables – Example
34
<table cellspacing="0" cellpadding="5"> <tr> <td><img src="ppt.gif"></td> <td><a href="lecture1.ppt">Lecture 1</a></td> </tr> <tr> <td><img src="ppt.gif"></td> <td><a href="lecture2.ppt">Lecture 2</a></td> </tr> <tr> <td><img src="zip.gif"></td> <td><a href="lecture2-demos.zip"> Lecture 2 - Demos</a></td> </tr></table>
Simple HTML TablesLive Demo
Data Cells and Header Cells
Two kinds of cells in HTML tables Data cells – containing the table
data Header cells – used for the column
names or some more important cells
Why two kinds of cells? Used to semantically separate the
cells
<tr> <th>Full Name</th> <th>Mark</th></tr><tr> <td>Doncho Minkov</td> <td>Very good (5)</td></tr><tr> <td>Georgi Georgiev</td> <td>Exellent (6)</td></tr>
Data and Header Cells
Live Demo
Complete HTML TablesWith Header, Footer
and Body
Complete HTML Tables Table rows split into three semantic sections: header, body and footer <thead> denotes table header and
contains <th> elements, instead of <td> elements
<tbody> denotes collection of table rows that contain the very data
<tfoot> denotes table footer but comes BEFORE the <tbody> tag
<colgroup> and <col> define columns (used to set column widths)
39
Complete HTML Table: Example
40
<table><colgroup> <col style="width:100px" /><col /></colgroup><thead> <tr><th>Column 1</th><th>Column 2</th></tr></thead><tfoot> <tr><td>Footer 1</td><td>Footer 2</td></tr></tfoot><tbody> <tr><td>Cell 1.1</td><td>Cell 1.2</td></tr> <tr><td>Cell 2.1</td><td>Cell 2.2</td></tr></tbody>
</table>
header
footer
Last comes the body (data)
th
columns
<table><colgroup> <col style="width:200px" /><col /></colgroup><thead> <tr><th>Column 1</th><th>Column 2</th></tr></thead><tfoot> <tr><td>Footer 1</td><td>Footer 2</td></tr></tfoot><tbody> <tr><td>Cell 1.1</td><td>Cell 1.2</td></tr> <tr><td>Cell 2.1</td><td>Cell 2.2</td></tr></tbody>
</table>
Complete HTML Table:Example (2)
41
table-full.html
Although the footer is before the data in the
code, it is displayed last
Complete HTML TablesLive Demo
Nested TablesTables in Tables in Tables in Tables…
Nested Tables Table "cells" (<td>) can contain
nested tables (tables within tables):
44
<table> <tr> <td>Contact:</td> <td> <table> <tr> <td>First Name</td> <td>Last Name</td> </tr> </table> </td> </tr></table>
nested-
tables.html
Nested TablesLive Demo
Complex TablesWith Padding, Spacing and Stuff
cellpadding
Defines the empty space around the cell content
cellspacing
Defines the empty space between cells
Cell Spacing and Padding
Tables have two attributes related to space
47
cell cell
cell cell
cell
cell
cell
cell
Cell Spacing and Padding – Example
48
<html> <head><title>Table Cells</title></head> <body> <table cellspacing="15" cellpadding="0"> <tr><td>First</td> <td>Second</td></tr> </table> <br/> <table cellspacing="0" cellpadding="10"> <tr><td>First</td><td>Second</td></tr> </table> </body></html>
table-
cells.html
Cell Spacing and Padding – Example (2)
49
<html> <head><title>Table Cells</title></head> <body> <table cellspacing="15" cellpadding="0"> <tr><td>First</td> <td>Second</td></tr> </table> <br/> <table cellspacing="0" cellpadding="10"> <tr><td>First</td><td>Second</td></tr> </table> </body></html>
table-
cells.html
Cell Spacing and
Cell PaddingLive Demo
Row and Column SpansHow to Make a Two-
Cells Column or Row?
rowspan
Defines how many rows the cell occupies
colspan
Defines how many columns the cell occupies
Column and Row Span Cells have two attributes related to merging
52
cell[1,1]
cell[1,2]
cell[2,1]
colspan="1"
colspan="1"
colspan="2"
cell[1,1]
cell[1,2]
cell[2,1]
rowspan="2"
rowspan="1"
rowspan="1"
Column and Row Span – Example
53
<table cellspacing="0"><tr class="1">
<td>Cell[1,1]</td><td colspan="2">Cell[2,1]</td>
</tr><tr class="2">
<td>Cell[1,2]</td><td rowspan="2">Cell[2,2]</td><td>Cell[3,2]</td></tr>
<tr class="3"><td>Cell[1,3]</td><td>Cell[2,3]</td><
/tr></table>
table-colspan-rowspan.html
Column and Row Span – Example (2)
54
<table cellspacing="0"><tr class="1">
<td>Cell[1,1]</td><td colspan="2">Cell[2,1]</td>
</tr><tr class="2">
<td>Cell[1,2]</td><td rowspan="2">Cell[2,2]</td><td>Cell[3,2]</td></tr>
<tr class="3"><td>Cell[1,3]</td><td>Cell[2,3]</td><
/tr></table>
table-colspan-rowspan.html
Cell[2,3]
Cell[1,3]
Cell[3,2]Cell[2,2
]
Cell[1,2]
Cell[2,1]Cell[1,1
]
Row and Column SpansLive Demo
Semantic Structural Tags
The Structure of a Web Page
A sample layout structure of a Web Page
The "HTML 4 and Before" Way
Using divs with IDs The IDs are needed for styling
58
<html><head> … </head><body> <div id="header"> … </div> <div id="navigation"> … </div> <div id="sidebar"> … </div> <div id="content"> … </div> <div id="footer"> … </div></body></html>
The HTML 4 Way
Live Demo
59
The HTML 5 Way In HTML 5 there are semantic tags for layout <nav>, <header>, <footer>, <section>
Work only on newer browsers60
<html><head> … </head><body> <header> … </header> <nav> … </nav> <aside> … </aside> <section> … </section> <footer> … </footer></body></html>
Semantic Structural Tags
Live Demo
Remember It is important to have the correct vision and attitude towards HTML HTML is only about structure, not
appearance
Browsers tolerate invalid HTML code and parse errors – you should not
Always think about semantics
The W3C HTML Validator is a way to validate your HTML http://validator.w3.org/
62
форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно
програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки
уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop
уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC
безплатен курс "Разработка на софтуер в cloud среда"
BG Coder - онлайн състезателна система - online judge
курсове и уроци по програмиране, книги – безплатно от Наков
безплатен курс "Качествен програмен код"
алго академия – състезателно програмиране, състезания
ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NETкурсове и уроци по програмиране – Телерик академия
курс мобилни приложения с iPhone, Android, WP7, PhoneGap
free C# book, безплатна книга C#, книга Java, книга C#Дончо Минков - сайт за програмиранеНиколай Костов - блог за програмиранеC# курс, програмиране, безплатно
?
? ? ??
?? ?
?
?
?
??
?
?
? ?
Questions?
?
HTML 5
http://html5course.telerik.com
Exercises1. Write an HTML page like the following:
* Use headings, divs, paragraphs and ul
64
Exercises (2)
2. Write an HTML page like the following:
65
Exercises (3)3. Create an user
profile Web page profile.html, friends page named friends.html and info page named home.html. Link them to one another using <a> tag
66
Exercises – Tables
67
1. Create Web Pages like the following using tables:
2. Create a Web Page like the following using forms:
Exercises – Tables (2)
3. Create a Calculator-like table. You should use a HTML 5 form for the Calculator
Buttons for all the numbersand operators (+, -, etc.)
Textbox for the result
Do not make the same stylesas the example
68
