html fundamentals by telerik academy
DESCRIPTION
HTML FundamentalsTRANSCRIPT
![Page 1: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/1.jpg)
Insert a Picture Here
HTML 5The past, the present, the future
Learning & Development Teamhttp://academy.telerik.com
Telerik Software Academy
![Page 2: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/2.jpg)
Table of Contents
Hypertext Markup LanguageHTML ConceptsHTML Document StructureHTML Common ElementsSection ElementsSemantic Structural Tags
2
![Page 3: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/3.jpg)
Hypertext Markup Language
![Page 4: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/4.jpg)
Hypertext Markup LanguageHTML – Hyper Text Markup LanguageA notation for describingdocument structure (semantic markup)formatting (presentation markup)Looks (looked?) like:A Microsoft Word documentThe markup tags provide information about the page content structureA HTML document consists of many tags
4
![Page 5: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/5.jpg)
Creating HTML Pages
An HTML document must have an .htm or .html file extensionHTML files can be created with text editors:Notepad, Notepad++, Sublime TextOr HTML editors (WYSIWYG Editors):Microsoft WebMatrixMicrosoft Expression WebMicrosoft Visual StudioAdobe Dreamweaver
5
![Page 6: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/6.jpg)
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 draft2011 – feature complete HTML5http://en.wikipedia.org/wiki/HTML5#Plan_2014
6
![Page 7: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/7.jpg)
HTML TerminologyTags, Attributes and Elements
![Page 8: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/8.jpg)
HTML Terminology
Concepts in HTMLTagsOpening tag and closing tagThe smallest piece in HTMLAttributesProperties of the tagSize, color, etc… ElementsCombination of opening, closing tag and attributes
![Page 9: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/9.jpg)
HTML Tags
Tags are the smallest piece in HTML DocumentStart with "<" and end with ">"Two kinds of tagsOpeningMark the start of an HTML elementClosingMark the end of an HTML elementStart in "</"
9
<html><body> <h1>Hello Pesho!</h1></body></html>
Opening tag
Closing tag
Opening tagOpening tag
Closing tagClosing tag
![Page 10: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/10.jpg)
Attributes
Attributes are properties of HTML ElementsUsed to set size, color, border, etc…Put directly in the tagsHas 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
![Page 11: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/11.jpg)
Most Common Attributes
There are some attributes that are common for every HTML elementId, class, name, styleAnd some attributes are specificFor example the attribute src of the img elementShows the path to the image to be shown
11
![Page 12: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/12.jpg)
HTML Elements
HTML Elements are combination of tags and attributesOpening tag with some or none attributes and a closing tag
12
<a href="http://google.com"> go to Google</a>
<html>…</html>
![Page 13: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/13.jpg)
HTML TerminologyLive Demo
![Page 14: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/14.jpg)
HTML Document StructureHTML Document, Doctype, Head, Body
![Page 15: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/15.jpg)
HTML Document Structure
Some elements are essential to each HTML Document:html, head, body, doctypeThe html elementUsed to mark the beginning and ending of a HTML documentAll the content of the web page is inside this tag
15
<html> …</html>
![Page 16: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/16.jpg)
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 documentWhat is in there?Styles, scriptsDeclare encodingsEtc..The title tag - the text in the tab of a browser
16
![Page 17: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/17.jpg)
Body Element and Doctypebody element contains all the visible to the user markupHeadings, text, hyperlinks, images, etc…Textboxes, sliders, buttons…Doctype is kind of the validator of the pageTells the browser in which version of HTML the page is writtenHTML 5 Doctype
17
<!DOCTYPE html>
![Page 18: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/18.jpg)
HTML Document StructureLive Demo
![Page 19: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/19.jpg)
HTML Common ElementsUsed in 90% of all the sites
![Page 20: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/20.jpg)
Text FormattingText formatting tags modify the text between the opening tag and the closing tagEx. <b>Hello</b> makes "Hello" bold
20
Many of the formatting tags are deprecated Use CSS instead
![Page 21: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/21.jpg)
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>
![Page 22: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/22.jpg)
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>
![Page 23: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/23.jpg)
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>
![Page 24: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/24.jpg)
Unordered Lists: <ul> TagCreate an Unordered List using <ul></ul>:
Attribute values for type are:disc, circle or square
24
Apple
Orange Pear
o Appleo Orangeo Pear
Apple Orange Pear
<ul type="disc"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li></ul>
![Page 25: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/25.jpg)
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 bulletsDefinition is indented
25
<dl><dt>HTML</dt><dd>A markup language …</dd><dt>CSS</dt><dd>Language used to …</dd></dl>
![Page 26: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/26.jpg)
HTML Common ElementsLive Demo
![Page 27: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/27.jpg)
Section ElementsThe <div> and The <span>
![Page 28: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/28.jpg)
The <div> Tag
<div> creates logical divisions within a pageBlock elementUsed 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>
![Page 29: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/29.jpg)
<DIV>Live Demo
<DIV>
![Page 30: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/30.jpg)
The <span> Tag
Inline style elementUseful for modifying a specific portion of text Don't create a separate area (paragraph) in the documentMainly 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>
![Page 31: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/31.jpg)
<SPAN>Live Demo
<SPAN>some text</span>
![Page 32: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/32.jpg)
Semantic Structural Tags
![Page 33: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/33.jpg)
The Structure of a Web Page
A sample layout structure of a Web Page
![Page 34: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/34.jpg)
The "HTML 4 and Before" Way
Using divs with IDsThe IDs are needed for styling
34
<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>
![Page 35: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/35.jpg)
The HTML 4 WayLive Demo
![Page 36: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/36.jpg)
The HTML 5 Way
In HTML 5 there are semantic tags for layout<nav>, <header>, <footer>, <section>
Work only on newer browsers
36
<html><head> … </head><body> <header> … </header> <nav> … </nav> <aside> … </aside> <section> … </section> <footer> … </footer></body></html>
![Page 37: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/37.jpg)
Semantic Structural TagsLive Demo
![Page 38: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/38.jpg)
Remember
It is important to have the correct vision and attitude towards HTMLHTML is only about structure, not appearanceBrowsers tolerate invalid HTML code and parse errors – you should notAlways think about semanticsThe W3C HTML Validator is a way to validate your HTMLhttp://validator.w3.org/
38
![Page 39: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/39.jpg)
форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно
програмиране за деца – безплатни курсове и уроцибезплатен 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
![Page 40: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/40.jpg)
Exercises
1. Write an HTML page like the following:* Use headings, divs, paragraphs and ul
40
![Page 41: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/41.jpg)
Exercises (2)
Write an HTML page like1. the following:
41
![Page 42: HTML Fundamentals by Telerik Academy](https://reader034.vdocument.in/reader034/viewer/2022050720/54bb64664a795962298b4569/html5/thumbnails/42.jpg)
Exercises (3)1. 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
42