Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

FFW Gabrovo PMG - HTML

•Download as PPTX, PDF•
•
Toni Kolev
Toni Kolev

HTML fundamentals. What is HTML and when it was implemented? Terminology, document structure, common elements, tables, forms and section elements.

1 of 40
HTML FFW This presentation and its contents are property of FFW.
Toni Kolev Quality Assurance Team Leader e: toni.kolev@ffwagency.com s: k-o-l-e-v FFW This presentation and its contents are property of FFW.
today’s agenda 01 02 03 04 05 06 What is CSS? CSS Syntax How to CSS? CSS Selectors CSS Values Section elements
HyperText Markup Language What is HTML?
HyperText Markup Language •HTML – HyperText Markup Language - HTML is used for describing the structure of a website •The markup tags provide meta-information about the page content and define its structure •A HTML document consists of many tags
Creating HTML Pages •An HTML document must have an .htm or .html file extension •HTML files can be created with text editors: - Notepad++, GEdit, Sublime Text, WebStorm, … •Or HTML editors (WYSIWYG Editors): - Microsoft WebMatrix - Microsoft Expression Web - Microsoft Visual Studio - Adobe Dreamweaver - Adobe Edge
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 2014 – HTML5 initial release
HTML Terminology Tags, Attributes and Elements
HTML Terminology • Concepts in HTML - Tags - opening and closing tag - the smallest piece in HTML • Attributes - properties of the tag, e.g. size, color • 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 with "</" and end with ">" <html> <body> <h1>Hello HTML5!</h1> </body> </html>
Attributes Attributes are properties of the HTML elements • Used to specify size, color, borders, etc… • Has value surrounded by " " or ' ' (always a string) <a href="http://ffwagency.com">go to FFW</a> <hr width="95%" size="3px" /> <img src="images/FFW_logo.png" />
Most Common Attributes • Common attributes for every HTML element id – assigns a unique element identifier (ID) class – assigns CSS class to styling name – assigns a name (for form elements) style – defines inline CSS style definitions • specific attributes for certain elements - e.g. attribute src of the img element - shows the path to the image to be shown
HTML Elements HTML elements are tags with content opening tag (+attributes) + content + closing tag <div class=“item”> <img src=“book.png” /> <span>Books</span> </div>
HTML Terminology DEMO
HTML Document Structure HTML Document, Doctype, Head, Body
HTML Document Structure Essential elements for each HTML document: html, head, body, doctype The <html> element used to mark the start and the end of the HTML document. All the content of the web page is inside the tag <html> … </html>
DOCTYPE The DOCTYPE declaration is kind of a validator of the page. It tells the browser which version of HTML to use HTML 5 <!DOCTYPE html> HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Head Element The <head> element contains markup not visible to the user. But it helps the browser to render correctly the HTML document. What’s in there? • Styles declarations • Scripts declarations • Encoding specification • Metadata definitions • The title tag – the text in the title (tab title) of the browser
Body Element The <body> element contains the entire visible markup. What’s in there? • Headings • Paragraphs • Text • Hyperlinks • Images • Forms • Etc.
HTML Document Structure DEMO
HTML Common Elements Used in 90% of all internet sites
Text Formatting The text formatting tags modify the text inside them. Ex. <b>Hello</b> makes the text “Hello” bold Most of them are deprecated and text is formatted with CSS HTML Element Result <strong></strong> strong (bold) <em></em> emphasized <sub></sub> Samplesubscript <sup></sup> Samplesuperscript <b></b> bold <i></i> italicized <u></u> underlined <pre></pre> Preformatted text
Some Simple Tags Hyperlink tag <a href=http://ffwagency.com title=“FFW”>FFW</a> Image tag <img src=“logo.png” alt=“logo” /> Text formatting tags This text is <em>emphasized.</em> <br /> New line<br /> This one is <strong>more emphasized.</strong>
Hyperlinks External hyperlink <a href=http://ffwagency.com title=“FFW”>FFW</a> Local hyperlink <h1 id=“exercises”>Exercises</h1> … See the <a href=“#exercises”>exercises</a> Relative hyperlink <a href=“../another_page.html”>Next page</a>
Images Images are inserted by the <img>tag <img src="logo.gif" alt="company logo" width="150px" height="150px" title="Company Slogan" /> Recommended attributes for all images: • alt – image alternative text (acts like description) • title – image description (shown on mouse hover) • width, height – the image size
Headings and Paragraphs Heading tags: <h1> - <h6> <h1>Heading 1</h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3> Paragraph tag: <p> <p>Paragraph 1</p> <p>Paragraph 2</p>
Ordered List: <ol> tag Create an Ordered List by using <ol></ol> <ol type="1"> <li>Java</li> <li>PHP</li> <li>C++</li> </ol> Attribute values for type are 1, A, a, I and i 1.Java 2.PHP 3.C++ a. Java b. PHP c. C++ A.Java B.PHP C.C++ I. Java II. PHP III. C++ i. Java ii. PHP iii. C++
Unordered List: <ul> tag Create an Unordered List by using <ul></ul> <ul type="disc"> <li>Java</li> <li>PHP</li> <li>C++</li> </ul> Attribute values for type are disc, circle, square o Java o PHP o C++ • Java • PHP • C++  Java  PHP  C++
HTML Common Elements DEMO
HTML tables Tables, Rows, Data
HTML Tables • Tables represent tabular data A table consists of one or several rows Each row has one or more columns • Tables have several core tags: <table></table>: begin / end the table <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
Simple HTML Table - Example <table cellspacing="0" cellpadding="5"> <tr> <td><img src="ppt.gif"></td> <td><a href="lesson1.ppt">Lesson 1</a></td> </tr> <tr> <td><img src="ppt.gif"></td> <td><a href="lesson2.ppt">Lesson 2</a></td> </tr> <tr> <td><img src="zip.gif"></td> <td><a href="lesson2-demos.zip">Lesson 2 - Demos</a></td> </tr> </table>
Forms Forms, Controls, Fields, Inputs, Submission, Validation
Section Elements <div> and <span>
The <div> tag <div> creates logical divisions within a page <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> • Block element (rendered as rectangle) • Typically used with CSS classes • <div>s can be nested as blocks
The <span> tag <span> creates inline styling element <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> • Useful for modifying a specific portion of text • Inline element -> doesn’t create a separate area (paragraph) in the document • Used to style pieces of text.
Section Elements DEMO
CSS Reference •CSS Tricks http://css-tricks.com •The CSS documentation at WebPlatform.org https://docs.webplatform.org/wiki/css •CSS Documentation at Mozilla https://developer.mozilla.org/en-US/docs/Web/CSS/Reference •CSS3 tutorials http://www.w3schools.com/css/css3_intro.asp
FFW Gabrovo PMG - HTML
FFW Gabrovo PMG - HTML

More Related Content

FFW Gabrovo PMG - HTML

  • 1. HTML FFW This presentation and its contents are property of FFW.
  • 2. Toni Kolev Quality Assurance Team Leader e: toni.kolev@ffwagency.com s: k-o-l-e-v FFW This presentation and its contents are property of FFW.
  • 3. today’s agenda 01 02 03 04 05 06 What is CSS? CSS Syntax How to CSS? CSS Selectors CSS Values Section elements
  • 5. HyperText Markup Language •HTML – HyperText Markup Language - HTML is used for describing the structure of a website •The markup tags provide meta-information about the page content and define its structure •A HTML document consists of many tags
  • 6. Creating HTML Pages •An HTML document must have an .htm or .html file extension •HTML files can be created with text editors: - Notepad++, GEdit, Sublime Text, WebStorm, … •Or HTML editors (WYSIWYG Editors): - Microsoft WebMatrix - Microsoft Expression Web - Microsoft Visual Studio - Adobe Dreamweaver - Adobe Edge
  • 7. 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 2014 – HTML5 initial release
  • 9. HTML Terminology • Concepts in HTML - Tags - opening and closing tag - the smallest piece in HTML • Attributes - properties of the tag, e.g. size, color • Elements - combination of opening, closing tag and attributes
  • 10. 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 with "</" and end with ">" <html> <body> <h1>Hello HTML5!</h1> </body> </html>
  • 11. Attributes Attributes are properties of the HTML elements • Used to specify size, color, borders, etc… • Has value surrounded by " " or ' ' (always a string) <a href="http://ffwagency.com">go to FFW</a> <hr width="95%" size="3px" /> <img src="images/FFW_logo.png" />
  • 12. Most Common Attributes • Common attributes for every HTML element id – assigns a unique element identifier (ID) class – assigns CSS class to styling name – assigns a name (for form elements) style – defines inline CSS style definitions • specific attributes for certain elements - e.g. attribute src of the img element - shows the path to the image to be shown
  • 13. HTML Elements HTML elements are tags with content opening tag (+attributes) + content + closing tag <div class=“item”> <img src=“book.png” /> <span>Books</span> </div>
  • 15. HTML Document Structure HTML Document, Doctype, Head, Body
  • 16. HTML Document Structure Essential elements for each HTML document: html, head, body, doctype The <html> element used to mark the start and the end of the HTML document. All the content of the web page is inside the tag <html> … </html>
  • 17. DOCTYPE The DOCTYPE declaration is kind of a validator of the page. It tells the browser which version of HTML to use HTML 5 <!DOCTYPE html> HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • 18. Head Element The <head> element contains markup not visible to the user. But it helps the browser to render correctly the HTML document. What’s in there? • Styles declarations • Scripts declarations • Encoding specification • Metadata definitions • The title tag – the text in the title (tab title) of the browser
  • 19. Body Element The <body> element contains the entire visible markup. What’s in there? • Headings • Paragraphs • Text • Hyperlinks • Images • Forms • Etc.
  • 21. HTML Common Elements Used in 90% of all internet sites
  • 22. Text Formatting The text formatting tags modify the text inside them. Ex. <b>Hello</b> makes the text “Hello” bold Most of them are deprecated and text is formatted with CSS HTML Element Result <strong></strong> strong (bold) <em></em> emphasized <sub></sub> Samplesubscript <sup></sup> Samplesuperscript <b></b> bold <i></i> italicized <u></u> underlined <pre></pre> Preformatted text
  • 23. Some Simple Tags Hyperlink tag <a href=http://ffwagency.com title=“FFW”>FFW</a> Image tag <img src=“logo.png” alt=“logo” /> Text formatting tags This text is <em>emphasized.</em> <br /> New line<br /> This one is <strong>more emphasized.</strong>
  • 24. Hyperlinks External hyperlink <a href=http://ffwagency.com title=“FFW”>FFW</a> Local hyperlink <h1 id=“exercises”>Exercises</h1> … See the <a href=“#exercises”>exercises</a> Relative hyperlink <a href=“../another_page.html”>Next page</a>
  • 25. Images Images are inserted by the <img>tag <img src="logo.gif" alt="company logo" width="150px" height="150px" title="Company Slogan" /> Recommended attributes for all images: • alt – image alternative text (acts like description) • title – image description (shown on mouse hover) • width, height – the image size
  • 26. Headings and Paragraphs Heading tags: <h1> - <h6> <h1>Heading 1</h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3> Paragraph tag: <p> <p>Paragraph 1</p> <p>Paragraph 2</p>
  • 27. Ordered List: <ol> tag Create an Ordered List by using <ol></ol> <ol type="1"> <li>Java</li> <li>PHP</li> <li>C++</li> </ol> Attribute values for type are 1, A, a, I and i 1.Java 2.PHP 3.C++ a. Java b. PHP c. C++ A.Java B.PHP C.C++ I. Java II. PHP III. C++ i. Java ii. PHP iii. C++
  • 28. Unordered List: <ul> tag Create an Unordered List by using <ul></ul> <ul type="disc"> <li>Java</li> <li>PHP</li> <li>C++</li> </ul> Attribute values for type are disc, circle, square o Java o PHP o C++ • Java • PHP • C++  Java  PHP  C++
  • 31. HTML Tables • Tables represent tabular data A table consists of one or several rows Each row has one or more columns • Tables have several core tags: <table></table>: begin / end the table <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
  • 32. Simple HTML Table - Example <table cellspacing="0" cellpadding="5"> <tr> <td><img src="ppt.gif"></td> <td><a href="lesson1.ppt">Lesson 1</a></td> </tr> <tr> <td><img src="ppt.gif"></td> <td><a href="lesson2.ppt">Lesson 2</a></td> </tr> <tr> <td><img src="zip.gif"></td> <td><a href="lesson2-demos.zip">Lesson 2 - Demos</a></td> </tr> </table>
  • 33. Forms Forms, Controls, Fields, Inputs, Submission, Validation
  • 35. The <div> tag <div> creates logical divisions within a page <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> • Block element (rendered as rectangle) • Typically used with CSS classes • <div>s can be nested as blocks
  • 36. The <span> tag <span> creates inline styling element <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> • Useful for modifying a specific portion of text • Inline element -> doesn’t create a separate area (paragraph) in the document • Used to style pieces of text.
  • 38. CSS Reference •CSS Tricks http://css-tricks.com •The CSS documentation at WebPlatform.org https://docs.webplatform.org/wiki/css •CSS Documentation at Mozilla https://developer.mozilla.org/en-US/docs/Web/CSS/Reference •CSS3 tutorials http://www.w3schools.com/css/css3_intro.asp

Editor's Notes

  1. HyperText Markup Language, commonly abbreviated as HTML, is the standard markup language used to create web pages. Initial release 1993 (23 years ago) Latest release 5.0 on 28 October 2014)
  2. IETF - The Internet Engineering Task Force (IETF) develops and promotes voluntary Internet standards, in particular the standards that comprise the Internet protocol suite (TCP/IP). Extensible Hypertext Markup Language (XHTML) - It mirrors or extends versions of the widely used Hypertext Markup Language (HTML)
  3. DEMO