The past, the present, the future Learning & Development Team Telerik Software Academy.
-
Upload
angela-strickland -
Category
Documents
-
view
214 -
download
0
Transcript of The past, the present, the future Learning & Development Team Telerik Software Academy.
![Page 1: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/1.jpg)
HTML 5The past, the present, the future
Learning & Development Teamhttp://academy.telerik.com
Telerik Software Academy
![Page 2: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/2.jpg)
Table of Contents Hypertext Markup Language HTML Concepts HTML Document Structure HTML Common Elements Section Elements Semantic Structural Tags
2
![Page 3: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/3.jpg)
Hypertext Markup Language
![Page 4: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/4.jpg)
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
![Page 5: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/5.jpg)
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
![Page 6: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/6.jpg)
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 http://en.wikipedia.org/wiki/HTML5#Plan_2014
6
![Page 7: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/7.jpg)
HTML TerminologyTags, Attributes and Elements
![Page 8: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/8.jpg)
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
![Page 9: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/9.jpg)
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
![Page 10: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/10.jpg)
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
![Page 11: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/11.jpg)
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
![Page 12: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/12.jpg)
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>
![Page 13: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/13.jpg)
HTML Terminology
Live Demo
![Page 14: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/14.jpg)
HTML Document Structure
HTML Document, Doctype, Head, Body
![Page 15: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/15.jpg)
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>
![Page 16: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/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 document
What is in there? Styles, scripts
Declare encodings
Etc..
The title tag - the text in the tab of a browser
16
![Page 17: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/17.jpg)
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>
![Page 18: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/18.jpg)
HTML Document Structure
Live Demo
![Page 19: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/19.jpg)
HTML Common Elements
Used in 90% of all the sites
![Page 20: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/20.jpg)
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
![Page 21: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/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: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/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: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/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: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/24.jpg)
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>
![Page 25: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/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 bullets
Definition is indented 25
<dl><dt>HTML</dt><dd>A markup language …</dd><dt>CSS</dt><dd>Language used to …</dd>
</dl>
![Page 26: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/26.jpg)
HTML Common Elements
Live Demo
![Page 27: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/27.jpg)
Section ElementsThe <div> and The <span>
![Page 28: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/28.jpg)
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>
![Page 29: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/29.jpg)
<DIV>Live Demo
![Page 30: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/30.jpg)
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>
![Page 31: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/31.jpg)
<SPAN>Live Demo
![Page 32: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/32.jpg)
Semantic Structural Tags
![Page 33: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/33.jpg)
The Structure of a Web Page
A sample layout structure of a Web Page
![Page 34: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/34.jpg)
The "HTML 4 and Before" Way
Using divs with IDs The 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: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/35.jpg)
The HTML 4 Way
Live Demo
![Page 36: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/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 browsers36
<html><head> … </head><body> <header> … </header> <nav> … </nav> <aside> … </aside> <section> … </section> <footer> … </footer></body></html>
![Page 37: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/37.jpg)
Semantic Structural Tags
Live Demo
![Page 38: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/38.jpg)
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/
38
![Page 39: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/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: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/40.jpg)
Exercises1. Write an HTML page like the following:
* Use headings, divs, paragraphs and ul
40
![Page 41: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/41.jpg)
Exercises (2)
2. Write an HTML page like the following:
41
![Page 42: The past, the present, the future Learning & Development Team Telerik Software Academy.](https://reader035.fdocuments.in/reader035/viewer/2022062519/5697bfeb1a28abf838cb7c42/html5/thumbnails/42.jpg)
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
42