Embed Size (px)
Citation preview
HTMLFFW
This presentation and its contents are property of FFW.
Toni KolevQuality Assurance Team Leader
e: [email protected]: k-o-l-e-v
FFW
This presentation and its contents are property of FFW.
today’s agenda010203040506
What is CSS?CSS SyntaxHow to CSS?CSS SelectorsCSS ValuesSection elements
HyperText Markup LanguageWhat 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, Future1991 – HTML first mentioned – Tim Berners-Lee – HTML tags1993 – HTML (first public version, published at IETF)1993 – HTML 2 draft1995 – HTML 2 – W3C1995 – 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 draft2014 – HTML5 initial release
HTML TerminologyTags, 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 elementStart with "</" and end with ">"<html>
<body> <h1>Hello HTML5!</h1> </body></html>
AttributesAttributes 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 elementid – assigns a unique element identifier (ID)class – assigns CSS class to stylingname – 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 ElementsHTML elements are tags with contentopening tag (+attributes) + content + closing tag
<div class=“item”><img
src=“book.png” /><span>Books</
span></div>
HTML TerminologyDEMO
HTML Document StructureHTML Document, Doctype, Head,
Body
HTML Document StructureEssential 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>
DOCTYPEThe 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 ElementThe <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 ElementThe <body> element contains the entire visible markup.
What’s in there?• Headings• Paragraphs• Text• Hyperlinks• Images• Forms• Etc.
HTML Document StructureDEMO
HTML Common ElementsUsed in 90% of all internet sites
<script
>
<strong><button>
<input><span><img>
<div><h1>
<section><li>
<a><ul>
Text FormattingThe 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 TagsHyperlink tag<a href=http://ffwagency.com title=“FFW”>FFW</a>
Image tag<img src=“logo.png” alt=“logo” />
Text formatting tagsThis text is <em>emphasized.</em><br />New line<br />This one is <strong>more emphasized.</strong>
HyperlinksExternal 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>
ImagesImages 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 ParagraphsHeading 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> tagCreate 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.Java2.PHP3.C++
a. Javab. PHPc. C++
A.JavaB.PHPC.C++
I. JavaII. PHPIII.C++
i. Javaii. PHPiii.C++
Unordered List: <ul> tagCreate 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 Javao PHPo C++
• Java• PHP• C++
Java PHP C++
HTML Common ElementsDEMO
<script
>
<strong><button>
<input><span><img>
<div><h1>
<section><li>
<a><ul>
HTML tablesTables, Rows, Data
HTML Tables• Tables represent tabular data
A table consists of one or several rowsEach 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 layoutUse 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>
FormsForms, 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 separatearea (paragraph) in the document• Used to style pieces of text.
Section ElementsDEMO
CSS Reference•CSS Trickshttp://css-tricks.com
•The CSS documentation at WebPlatform.orghttps://docs.webplatform.org/wiki/css
•CSS Documentation at Mozillahttps://developer.mozilla.org/en-US/docs/Web/CSS/Reference
•CSS3 tutorialshttp://www.w3schools.com/css/css3_intro.asp
Questions?
Thank you!
