HTML                           The past, the present, the futureDoncho MinkovTechnical Trainerhttp://www.minkov.itTelerik ...
Table of Contents (1)1.   Introduction to HTML      What is a Web Page?      My First HTML Page      Basic Tags: Hyperl...
Table of Contents (2)      The <body> Section      Text Styling and Formatting Tags      Hyperlinks: <a>      Hyperlin...
Table of Contents(3)4.   Introducing to HTML5      Changed old tags      New tags      New Attributes      New Structu...
Introduction to HTML       Web 101
What is HTML HTML was  designed to be simple language for describing documents   It was created by scientists, so “simpl...
HTML Structure HTML was inspired by other similar languages, such as GML and Scribe HTML1 had tags for the following    ...
Simple Q&A Q: Why Anchor and not Link? A: As mentioned earlier,HTML was created by scientists and they tend to have diff...
Nesting Nesting is when you want to put a tag in a tag   You’ve seen “Inception”, you know what I mean   And like in “I...
HTML Code Formatting   The HTML source code should be formatted to    increase readability and facilitate debugging.    ...
What happened next? HTML evolved driven by people and browsers New versions   of HTML  Inevitably a doctype Accompanyi...
My first web page   first-page.html                                          Boring    <html>             <head>         ...
HTML Basics Time to get dirty
Some Simple Tags Hyperlink Tags  <a href="http://www.telerik.com/"    title="Telerik">Link to Telerik Web site</a> Image...
Simple Q&A Q: What are the equation looking things? A: That would be attributes   Attributes add more information to an...
Attributes Some attributes   can apply to all element:  id, style, class, title  The id is unique in the document  The...
Remember It is important to have the correct vision   and attitude towards HTML   HTML is only about structure, not appe...
Common TagsThe ones needed 80% of the time
Hyperlinks Hyperlinks, or just links, are one-way tie between two documents Put simply,if you have a page, and you want ...
Hyperlinks (2) Link to a document on the same server in the same directory:  <a href="form.html">Fill Our Form</a> Link ...
Hyperlinks (3) Link to a document on the same server in the root (top most) directory:   <a href=“/form.html">Fill Our Fo...
Hyperlinks (4) Link to an external web site: <a href="http://devbg.org" target="_blank">BASD</a>   Always use the full U...
Hyperlinks and Sections   Link to another location in the same document:    <a href="#section1">Go to Introduction</a>   ...
Hyperlinks – Examplehyperlinks.html<a href="form.html">Fill Our Form</a> <br /><a href="../parent.html">Parent</a> <br /><...
Hyperlinks  Live Demo
Links to the Same Document –                                  Examplehyperlinks-sections.html<h1>Table of Contents</h1><p>...
Links to the Same Document          Live Demo
Images: <img> tag Inserting an image with <img> tag:  <img src="/img/basd-logo.png“ /> Image attributes:  src      Locat...
Headings and Paragraphs Heading Tags (h1 – h6)  <h1>Heading 1</h1>  <h2>Sub heading 2</h2>  <h3>Sub heading 3</h3> Parag...
Headings and Paragraphs –                                  Exampleheadings-and-paragraphs.html<html>  <head><title>Heading...
Headings and Paragraphs        Live Demo
Text Formatting   Text formatting tags modify the text between    the opening tag and the closing tag     Ex. <b>Hello</...
Simple Q&A Q: Bold   or strong? A: Strong   Bold describes the looks e.g. the font is bold,    strong describes the imp...
More on formatting Thinks semantics:   Emphasize, Strong emphasize, Insertion,    Deletion, Sub-script, Super-script, Qu...
Text Formatting – Exampletext-formatting.html<html>  <head>    <title>Text formating</title>  </head>  <body>  <h1>Notice<...
Text Formatting    Live Demo
Ordered Lists   Create an Ordered List using <ol></ol>:    <ol type="1">      <li>Apple</li>      <li>Orange</li>      <l...
Unordered Lists Create an Unordered List using      <ul></ul>:  <ul type="disk">    <li>Apple</li>    <li>Orange</li>    ...
Definition lists Create definition lists   using <dl>   Pairs of text and associated definition; text is in    <dt> tag,...
Lists – Example<ol type="1">                        lists.html    <li>Apple</li>    <li>Orange</li>    <li>Grapefruit</li>...
ListsLive Demo
Miscellaneous Tags <hr />: Draws a horizontal      rule (line):  <hr size="5" width="70%" /> <center></center>: Deprecat...
Miscellaneous Tags – Examplemisc.html<html>  <head>    <title>Miscellaneous Tags Example</title>  </head>  <body>    <hr s...
Miscellaneous Tags      Live Demo
Introduction to HTMLHTML Document Structure in Depth
HTML FlavorsLime, Mint and Tonic
HTML Versions HTML has evolved during      the years   From a handful of tags to over a hundred   Though very few tags ...
The <!DOCTYPE> Declaration   HTML documents must start with a document    type definition (DTD)     It tells web browser...
HTML vs. XHTML XHTML is   more strict than HTML  Tags and attribute names must be in lowercase  All tags must be closed...
XHTML vs. HTML (2) Many element attributes                       are deprecated in XHTML, most are moved to CSS Attribut...
Quick Q&A Q: Which doctype to use? A: XHTML 1.0 Transitional   is usually OK   Do not be tempted by XHTML 1.1 Q: How t...
Boring StuffHead, Body, Comments and More…
The <head> Section Contains information that doesn’t show directly on the viewable page Starts after the <!doctype> decl...
<title>   Title should be placed between <head> and    </head> tags     <title>Telerik Academy – Winter Season 2009/2010 ...
<meta> Meta tags additionally                       describe the content contained within the page  <meta name="descripti...
<script> The <script> element is used to embed scripts into an HTML document   Script are executed in the clients Web br...
<style>   The <style> element embeds formatting    information (CSS styles) into an HTML page    <html>                  ...
<!-- --> Comments can exist anywhere between the <html></html> tags Comments start with <!-- and end with --> <!–- Teler...
<body> Section: Introduction The <body> section describes the viewable portion of the page Starts after the <head> </hea...
HTML Special Characters    Symbol Name             HTML Entity   Symbol     Copyright Sign           &copy;        ©Regist...
Special Characters – Example<p>[&gt;&gt;&nbsp;&nbsp;Welcome special-chars.html    &nbsp;&nbsp;&lt;&lt;]</p>  <p>►I have fo...
Special Chars – Example (2)<p>[&gt;&gt;&nbsp;&nbsp;Welcome special-chars.html    &nbsp;&nbsp;&lt;&lt;]</p>  <p>►I have fol...
HTML Special Characters        Live Demo
Using <DIV> and <SPAN>Block and Inline Elements
Block and Inline Elements Block elements add a line break before and after them, and expand to 100% width   <div>, <p>, ...
The <div> Tag <div> creates logical   divisions within a page Block style element Used with CSS Example:  div-and-span...
<DIV>Live Demo
The <span> Tag Inline style element Useful for modifying a specific portion of text   Dont create a separate area    (p...
<SPAN>Live Demo
HTML Tags Index http://www.w3.org/TR/html4/index/elements. html http://www.htmldog.com/reference/htmltags/              ...
HTML 5What the … is HTML 5?
What is HTML 5? HTML5 – the next major revision    of the HTML  Currently under development    Far away from final vers...
HTML – Past, Present, Future   1991 – HTML first mentioned – Tim Berners-Lee – HTML tags   1993 – HTML (first public ver...
HTML 5 Goals Latest version is HTML5   Aimed to have all of the power of native    applications   Run on any platform (...
Designer OutlookWhat a Designer Should Know?
Changed Old Tags Doctype tag:  <!DOCTYPE html> HTML tag:  <html lang="en" xml:lang="en"> Meta tag:  <meta charset="utf-...
New Layout Sctucture   Better layout structure: new structural elements     <section>     <header>                 <hea...
New Layout Sctucture (2) Elements like header and footer are not meant to be only at the top and bottom of the page Head...
New Layout Sctucture –                                 Example<body> <header>   <hgroup>     <h1>HTML 5 Presentation</h1> ...
New Layout Sctucture –                               Example (2)  <section>    <article>      <header>        <h1>First Pa...
New Layout Structure Tags         Live Demo
New Tags   <article>     For external content, like text from a news-article,      blog, forum, or any other external so...
New Tags (2)   <mark> For text that should be highlighted   <nav> For a section of navigation   <section> For a sect...
New Media Tags Media Tags  <audio>     Attributes: autoplay, controls, loop, src  <video>     Attributes: autoplay, c...
Playing Audio   Live Demo
HTML - The past, the present,                                                                                             ...
Exercises1.   Write an HTML page like the following:        * Use headings and divs                                       ...
Exercises (2)2.   Write an HTML page like the following:3.   Write an HTML page looking like the PNG file named     3.Intr...
Exercises (3)4.   Create an user profile Web     page Profile.html, friends     page named Friends.html     and info page ...
Exercises (4)5.   Create a Web site like the following:     See the image InetJava-site.png.                    90
Free Trainings @ Telerik Academy "Web Design with HTML 5, CSS      3 and    JavaScript" course @ Telerik Academy       h...
Upcoming SlideShare
Loading in...5
×

3. HTML the past, the present, the future - Web Front-End

4,386

Published on

Everything you need to start writing HTML pages plus introduction to HTML5.
Telerik Software Academy: http://html5course.telerik.com
The website and all video materials are in Bulgarian

Content:
Introduction to HTML
- What is a Web Page?
- My First HTML Page
- Basic Tags: Hyperlinks, Images, Formatting
- Headings and Paragraphs
HTML in Details
- The <!DOCTYPE> Declaration
- The <head> Section: Title, Meta, Script, Style
- The <body> Section
- Text Styling and Formatting Tags
- Hyperlinks: <a>
- Hyperlinks and Sections
- Images: <img>
- Lists: <ol>, <ul> and <dl>
- HTML Special Characters
The <div> and <span> elements
Introducing to HTML5
- Changed old tags
- New tags
- New Attributes
- New Structural Tags

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,386
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
165
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

3. HTML the past, the present, the future - Web Front-End

  1. 1. HTML The past, the present, the futureDoncho MinkovTechnical Trainerhttp://www.minkov.itTelerik Software Academyacademy.telerik.com
  2. 2. Table of Contents (1)1. Introduction to HTML  What is a Web Page?  My First HTML Page  Basic Tags: Hyperlinks, Images, Formatting  Headings and Paragraphs2. HTML in Details  The <!DOCTYPE> Declaration  The <head> Section: Title, Meta, Script, Style 2
  3. 3. Table of Contents (2)  The <body> Section  Text Styling and Formatting Tags  Hyperlinks: <a>  Hyperlinks and Sections  Images: <img>  Lists: <ol>, <ul> and <dl>  HTML Special Characters3. The <div> and <span> elements 3
  4. 4. Table of Contents(3)4. Introducing to HTML5  Changed old tags  New tags  New Attributes  New Structural Tags 4
  5. 5. Introduction to HTML Web 101
  6. 6. What is HTML HTML was designed to be simple language for describing documents  It was created by scientists, so “simple” is not always your average “simple”  Describing means outlining the structure of a document in terms of parts: headings, paragraphs, lists, tables etc. To start coding HTML, just create a new file with “.html” extension, our touch it  Think in structure, not presentation 6
  7. 7. HTML Structure HTML was inspired by other similar languages, such as GML and Scribe HTML1 had tags for the following elements:  Paragraphs, Headings, Anchors (links), Horizontal rule, Line breaks though they proved insufficient and later more were added What are tags?  A tag is the red letter from above enclosed in angle brackets: <p> is for paragraph  A pair of starting and end tag forms an element 7
  8. 8. Simple Q&A Q: Why Anchor and not Link? A: As mentioned earlier,HTML was created by scientists and they tend to have different opinion than we do  Btw, there is Link in HTML, it just does another job Q: So I just write opening and closed tags? A: Mostly. There are exceptions.  And you haven’t asked about nesting 8
  9. 9. Nesting Nesting is when you want to put a tag in a tag  You’ve seen “Inception”, you know what I mean  And like in “Inception”, the more you nest, the nastier it gets Not all tags can be put in all tags  Like, if you want to make an entire paragraph to be a link, you don’t put the link around the paragraph, but vice versa  Scientists, go figure 9
  10. 10. HTML Code Formatting The HTML source code should be formatted to increase readability and facilitate debugging.  Every block element should start on a new line.  Every nested (block) element should be indented.  Browsers ignore multiple whitespaces in the page source, so formatting is harmless. For performance reasons, formatting can be sacrificed 10
  11. 11. What happened next? HTML evolved driven by people and browsers New versions of HTML  Inevitably a doctype Accompanying technologies  CSS, JavaScript  Plugins like Java, Flash, Silverlight Rich media and so on… 11
  12. 12. My first web page first-page.html Boring <html> <head> <title>My first page!!!</title> </head> <body> <p>I am making pages</p> Content </body> </html> Boring 12
  13. 13. HTML Basics Time to get dirty
  14. 14. Some Simple Tags Hyperlink Tags <a href="http://www.telerik.com/" title="Telerik">Link to Telerik Web site</a> Image Tags <img src="logo.gif" alt="logo" width="50" /> Text formatting tags This text is <em>emphasized.</em> <br />new line<br /> This one is <strong>more emphasized.</strong> 14
  15. 15. Simple Q&A Q: What are the equation looking things? A: That would be attributes  Attributes add more information to an element Let’s examine: <img src="logo.gif" alt="logo" widht="50" />  So my src attribute equals (is) logo.gif  My alt attribute is logo  You can tell it’s 50 pixels wide 15
  16. 16. Attributes Some attributes can apply to all element:  id, style, class, title  The id is unique in the document  The title attribute is displayed as hint when the element is hovered with the mouse Some attributes are optional Some are mandatory Some elements MUST have attributes  the image element must have a src attribute 16
  17. 17. 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 17
  18. 18. Common TagsThe ones needed 80% of the time
  19. 19. Hyperlinks Hyperlinks, or just links, are one-way tie between two documents Put simply,if you have a page, and you want to go to another page, you click (follow) a link A link must have a destination (href) attribute and text content  Href means “hypertext reference”  Optionally, it my have a title <a href="a.html" title=“Go to A">Click</a> 19
  20. 20. Hyperlinks (2) Link to a document on the same server in the same directory: <a href="form.html">Fill Our Form</a> Link to a document on the same server in the parent directory: <a href="../parent.html">Parent</a> Link to a document on the same server in the sub directory stuff: <a href="stuff/cat.html">Catalog</a> 20
  21. 21. Hyperlinks (3) Link to a document on the same server in the root (top most) directory: <a href=“/form.html">Fill Our Form</a> Remember:  if not linking to the root (/), links are relative to the current document and may be broken if you move the origin document  You can do any number of going up (../), but you can’t go upper than the root 21
  22. 22. Hyperlinks (4) Link to an external web site: <a href="http://devbg.org" target="_blank">BASD</a>  Always use the full URL, including the protocol (http://), not just “devbg.org”  Using the target attribute tells the browser where to open the link, with _blank meaning open in new window Link to an email address: <a href="mailto:bugs@example.com?subject=Bug+Report"> Please report bugs here (by e-mail only)</a> 22
  23. 23. Hyperlinks and Sections Link to another location in the same document: <a href="#section1">Go to Introduction</a> ... <h2 id="section1">Introduction</h2> Link to a specific location in another document: <a href="chapter3.html#section3.1.1">Go to Section 3.1.1</a> <!–- In chapter3.html --> ... <div id="section3.1.1"> <h3>3.1.1. Technical Background</h3> </div> 23
  24. 24. Hyperlinks – Examplehyperlinks.html<a href="form.html">Fill Our Form</a> <br /><a href="../parent.html">Parent</a> <br /><a href="stuff/cat.html">Catalog</a> <br /><a href="http://www.devbg.org" target="_blank">BASD</a><br /><a href="mailto:bugs@example.com?subject=BugReport">Please report bugs here (by e-mail only)</a><br /><a href="apply-now.html"><img src="apply-now.png" /></a><br /><a href="../english/index.html">Switch to Englishversion</a> <br /> 24
  25. 25. Hyperlinks Live Demo
  26. 26. Links to the Same Document – Examplehyperlinks-sections.html<h1>Table of Contents</h1><p><a href="#section1">Introduction</a><br /><a href="#section2">Some background</A><br /><a href="#section2.1">Project History</a><br />...the rest of the table of contents...<!-- The document text follows here --><h2 id="section1">Introduction</h2>... Section 1 follows here ...<h2 id="section2">Some background</h2>... Section 2 follows here ...<h3 id="section2.1">Project History</h3>... Section 2.1 follows here ... 26
  27. 27. Links to the Same Document Live Demo
  28. 28. Images: <img> tag Inserting an image with <img> tag: <img src="/img/basd-logo.png“ /> Image attributes: src Location of image file (relative or absolute) alt Substitute text for display (e.g. in text mode) height Number of pixels of the height width Number of pixels of the width border Size of border, 0 for no border Example: <img src="php.png" alt="PHP Logo" /> 28
  29. 29. Headings and Paragraphs Heading Tags (h1 – h6) <h1>Heading 1</h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3> Paragraph Tags <p>This is my first paragraph</p> <p>This is my second paragraph</p> Sections: div and span <div>This is a div</div> <span>This is a div</span> 29
  30. 30. Headings and Paragraphs – Exampleheadings-and-paragraphs.html<html> <head><title>Headings and paragraphs</title></head> <body> <h1>Heading 1</h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3> <p>This is my first paragraph</p> <p>This is my second paragraph</p> </body></html> 30
  31. 31. Headings and Paragraphs Live Demo
  32. 32. 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 <blockquote></blockquote> Quoted text block <del></del> Deleted text – strike through 32
  33. 33. Simple Q&A Q: Bold or strong? A: Strong  Bold describes the looks e.g. the font is bold, strong describes the importance e.g. this word is emphasized on with great importance Q: So I suppose it’s emphasized and not italics? A: Correct  Bold, italics, underline are deprecated and will talk about that in a moment 33
  34. 34. More on formatting Thinks semantics:  Emphasize, Strong emphasize, Insertion, Deletion, Sub-script, Super-script, Quotations Those describe parts of the document There are other, lesser known text formatting elements for input, output, variables and other parts of a document, say a tech spec, but if you come to need those, you can easily google As usual, most of them are for scientific / engineering purposes and might look weird 34
  35. 35. Text Formatting – Exampletext-formatting.html<html> <head> <title>Text formating</title> </head> <body> <h1>Notice</h1> <p>This is a <em>sample</em> Web page.</p> <p><pre>Next paragraph: preformatted.</pre></p> <h2>More Info</h2> <p>One line<br /> Next line.</p> </body></html> 35
  36. 36. Text Formatting Live Demo
  37. 37. Ordered Lists Create an Ordered List using <ol></ol>: <ol type="1"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li> </ol> Attribute values for type are 1, A, a, I, or i 1. Apple i. Apple 2. Orange ii. Orange 3. Grapefruit iii. Grapefruit a. Apple A. Apple b. Orange I. Apple B. Orange c. Grapefruit II. Orange C. Grapefruit III. Grapefruit 37
  38. 38. Unordered Lists Create an Unordered List using <ul></ul>: <ul type="disk"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li> </ul> Attribute values for type are:  disc, circle or square • Apple o Apple  Apple • Orange o Orange  Orange • Pear o Pear  Pear 38
  39. 39. Definition lists Create definition lists using <dl>  Pairs of text and associated definition; text is in <dt> tag, definition in <dd> tag <dl> <dt>HTML</dt> <dd>A markup language …</dd> <dt>CSS</dt> <dd>Language used to …</dd> </dl>  Renders without bullets  Definition is indented 39
  40. 40. Lists – Example<ol type="1"> lists.html <li>Apple</li> <li>Orange</li> <li>Grapefruit</li></ol><ul type="disc"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li></ul><dl> <dt>HTML</dt> <dd>A markup lang…</dd></dl> 40
  41. 41. ListsLive Demo
  42. 42. Miscellaneous Tags <hr />: Draws a horizontal rule (line): <hr size="5" width="70%" /> <center></center>: Deprecated! <center>Hello World!</center> <font></font>: Deprecated! <font size="3" color="blue">Font3</font> <font size="+4" color="blue">Font+4</font> 42
  43. 43. Miscellaneous Tags – Examplemisc.html<html> <head> <title>Miscellaneous Tags Example</title> </head> <body> <hr size="5" width="70%" /> <center>Hello World!</center> <font size="3" color="blue">Font3</font> <font size="+4" color="blue">Font+4</font> </body></html> 43
  44. 44. Miscellaneous Tags Live Demo
  45. 45. Introduction to HTMLHTML Document Structure in Depth
  46. 46. HTML FlavorsLime, Mint and Tonic
  47. 47. HTML Versions HTML has evolved during the years  From a handful of tags to over a hundred  Though very few tags were removed, many new were added  By design, if a tag is not recognized, it’s ignored and its text content is shown Problem: how to tell browsers which version is used in a document? 47
  48. 48. The <!DOCTYPE> Declaration HTML documents must start with a document type definition (DTD)  It tells web browsers what type is the served code  Possible versions: HTML 4.01, XHTML 1.0 (Transitional or Strict), XHTML 1.1, HTML 5 Example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  See http://w3.org/QA/2002/04/valid-dtd-list.html for a list of possible doctypes 48
  49. 49. HTML vs. XHTML XHTML is more strict than HTML  Tags and attribute names must be in lowercase  All tags must be closed (<br/>, <img/>) while HTML allows <br> and <img> and implies missing closing tags (<p>par1 <p>par2)  XHTML allows only one root <html> element (HTML allows more than one) 49
  50. 50. XHTML vs. HTML (2) Many element attributes are deprecated in XHTML, most are moved to CSS Attribute minimization is forbidden, e.g. <input type="checkbox" checked> <input type="checkbox" checked="checked" /> Note: Web browsers load XHTML faster than HTML and valid code faster than invalid! 50
  51. 51. Quick Q&A Q: Which doctype to use? A: XHTML 1.0 Transitional is usually OK  Do not be tempted by XHTML 1.1 Q: How to remember them? A: Don’t. Just know which one does what and if needed google 51
  52. 52. Boring StuffHead, Body, Comments and More…
  53. 53. The <head> Section Contains information that doesn’t show directly on the viewable page Starts after the <!doctype> declaration Begins with <head> and ends with </head> Contains mandatory single <title> tag Can contain some other tags, e.g.  <meta>  <script>  <style>  <!–- comments --> 53
  54. 54. <title> Title should be placed between <head> and </head> tags <title>Telerik Academy – Winter Season 2009/2010 </title> Used to specify a title in the window titlebar Search engines and people rely on titles 54
  55. 55. <meta> Meta tags additionally describe the content contained within the page <meta name="description" content="HTML tutorial" /> <meta name="keywords" content="html, web design, styles" /> <meta name="author" content="Chris Brewer" /> <meta http-equiv="refresh" content="5; url=http://www.telerik.com" /> 55
  56. 56. <script> The <script> element is used to embed scripts into an HTML document  Script are executed in the clients Web browser  Scripts can live in the <head> and in the <body> sections Supported client-side scripting languages:  JavaScript (it is not Java!) – de facto standard  VBScript (obsolete)  Jscript (obsolete) 56
  57. 57. <style> The <style> element embeds formatting information (CSS styles) into an HTML page <html> style-example.html <head> <style type="text/css"> p { font-size: 12pt; line-height: 12pt; } p:first-letter { font-size: 200%; } span { text-transform: uppercase; } </style> </head> <body> <p>Styles demo.<br /> <span>Test uppercase</span>. </p> </body> </html> 57
  58. 58. <!-- --> Comments can exist anywhere between the <html></html> tags Comments start with <!-- and end with --> <!–- Telerik Logo (a JPG file) --> <img src="logo.jpg" alt=“Telerik Logo"> <!–- Hyperlink to the web site --> <a href="http://telerik.com/">Telerik</a> <!–- Show the news table --> <table class="newstable"> ... 58
  59. 59. <body> Section: Introduction The <body> section describes the viewable portion of the page Starts after the <head> </head> section Begins with <body> and ends with </body> <html> <head><title>Test page</title></head> <body> <!-- This is the Web page body --> </body> </html> 59
  60. 60. HTML Special Characters Symbol Name HTML Entity Symbol Copyright Sign &copy; ©Registered Trademark Sign &reg; ® Trademark Sign &trade; ™ Less Than &lt; < Greater Than &gt; > Ampersand &amp; & Non-breaking Space &nbsp; Em Dash &mdash; — Quotation Mark &quot; " Euro € € British Pound &pound; £ Japanese Yen &yen; ¥ 60
  61. 61. Special Characters – Example<p>[&gt;&gt;&nbsp;&nbsp;Welcome special-chars.html &nbsp;&nbsp;&lt;&lt;]</p> <p>►I have following cards: A♣, K♦ and 9♥.</p> <p>►I prefer hard rock ♫ music ♫</p> <p>&copy; 2006 by Svetlin Nakov &amp; histeam</p> <p>Telerik Academy™</p> 61
  62. 62. Special Chars – Example (2)<p>[&gt;&gt;&nbsp;&nbsp;Welcome special-chars.html &nbsp;&nbsp;&lt;&lt;]</p> <p>►I have following cards: A♣, K♦ and 9♥.</p> <p>►I prefer hard rock ♫ music ♫</p> <p>&copy; 2006 by Svetlin Nakov &amp; histeam</p> <p>Telerik Academy™</p> 62
  63. 63. HTML Special Characters Live Demo
  64. 64. Using <DIV> and <SPAN>Block and Inline Elements
  65. 65. Block and Inline Elements Block elements add a line break before and after them, and expand to 100% width  <div>, <p>, <h1>, <ul> are block elements Inline elements don’t break the text before and after them  <span>, <a>, <em> are inline elements http://www.w3.org/TR/CSS2/visuren.html#blo ck-boxes 65
  66. 66. The <div> Tag <div> creates logical divisions within a page Block style element Used with CSS Example: div-and-span.html <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> 66
  67. 67. <DIV>Live Demo
  68. 68. The <span> Tag Inline style element Useful for modifying a specific portion of text  Dont create a separate area (paragraph) in the document Makes sense only with some CSSspan.html <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> 68
  69. 69. <SPAN>Live Demo
  70. 70. HTML Tags Index http://www.w3.org/TR/html4/index/elements. html http://www.htmldog.com/reference/htmltags/ 70
  71. 71. HTML 5What the … is HTML 5?
  72. 72. What is HTML 5? HTML5 – the next major revision of the HTML  Currently under development  Far away from final version  Developed under the HTML 5 working group of the World Wide Web Consortium (W3C) in 2007  First Public Working Draft of the specification  January 22, 2008  Parts of HTML5 are being implemented in browsers before the whole specification is ready 72
  73. 73. 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 73
  74. 74. HTML 5 Goals Latest version is HTML5  Aimed to have all of the power of native applications  Run on any platform (Windows, Linux, iPhone, Android, etc.) New features should be based on HTML, CSS, DOM and JavaScript Reduce the need for external plugins Better error handling More markup to replace scripting 74
  75. 75. Designer OutlookWhat a Designer Should Know?
  76. 76. Changed Old Tags Doctype tag: <!DOCTYPE html> HTML tag: <html lang="en" xml:lang="en"> Meta tag: <meta charset="utf-8"> Link tag: <link rel="stylesheet" href="style-original.css"> 76
  77. 77. New Layout Sctucture Better layout structure: new structural elements  <section>  <header> <header>  <nav> <section> <header>  <article> <nav> <aside> <article>  <aside>  <footer> <footer> <footer> 77
  78. 78. New Layout Sctucture (2) Elements like header and footer are not meant to be only at the top and bottom of the page Header and footer of each document section  Not very different from <DIV> tag but are more semantically well defined in the document structure 78
  79. 79. New Layout Sctucture – Example<body> <header> <hgroup> <h1>HTML 5 Presentation</h1> <h2>New Layout Structure</h2> </hgroup> </header> <nav> <ul> Lecture </ul> <ul> Demos </ul> <ul> Trainers </ul> </nav> 79
  80. 80. New Layout Sctucture – Example (2) <section> <article> <header> <h1>First Paragraph</h1> </header> <section> Some text </section> </article> </section> <aside> <a href="http://academy.telerik.com"> more info</a> </aside> <footer> Done by Doncho Minkov, (c) 2011, Telerik Academy </footer></body> 80
  81. 81. New Layout Structure Tags Live Demo
  82. 82. New Tags <article>  For external content, like text from a news-article, blog, forum, or any other external source <aside>  For content aside from (but related to) the content it is placed in <details>  For describing details about a document, or parts of a document <summary>  A caption, or summary, inside the details element 82
  83. 83. New Tags (2) <mark> For text that should be highlighted <nav> For a section of navigation <section> For a section in a document (e.g. chapters, headers, footers) <wbr> Word break. For defining an appropriate place to break a long word or sentence Other tags <command>, <datalist>, <details>, <progress>, etc. 83
  84. 84. New Media Tags Media Tags  <audio>  Attributes: autoplay, controls, loop, src  <video>  Attributes: autoplay, controls, loop, height, width, src <audio width="360" height="240" controls= "controls" > <source src="someSong.mp3" type="audio/mp3"> </source> Audio tag is not supported </audio> 84
  85. 85. Playing Audio Live Demo
  86. 86. HTML - The past, the present, the future курсове и уроци по програмиране, уеб дизайн – безплатно BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране – Телерик академия форум програмиране, форум уеб дизайн уроци по програмиране и уеб дизайн за ученици ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET http://academy.telerik.com програмиране за деца – безплатни курсове и уроци ASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC безплатен SEO курс - оптимизация за търсачки алго академия – състезателно програмиране, състезаниякурсове и уроци по програмиране, книги – безплатно от Наков курс мобилни приложения с iPhone, Android, WP7, PhoneGap уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop Дончо Минков - сайт за програмиране free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиране безплатен курс "Качествен програмен код" безплатен курс "Разработка на софтуер в cloud среда" C# курс, програмиране, безплатно
  87. 87. Exercises1. Write an HTML page like the following: * Use headings and divs 87
  88. 88. Exercises (2)2. Write an HTML page like the following:3. Write an HTML page looking like the PNG file named 3.Introduction.PNG. Using the <a> tag add anchors to the corresponding sections in the same page. 88
  89. 89. Exercises (3)4. Create an user profile Web page Profile.html, friends page named Friends.html and info page named Info.html. Link them to one another using <a> tag 89
  90. 90. Exercises (4)5. Create a Web site like the following: See the image InetJava-site.png. 90
  91. 91. Free Trainings @ Telerik Academy "Web Design with HTML 5, CSS 3 and JavaScript" course @ Telerik Academy  html5course.telerik.com Telerik Software Academy  academy.telerik.com Telerik Academy @ Facebook  facebook.com/TelerikAcademy Telerik Software Academy Forums  forums.academy.telerik.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×