html fundamentals by telerik academy

Insert a Picture Here

HTML 5The past, the present, the future

Learning & Development Teamhttp://academy.telerik.com

Telerik Software Academy

http://academy.telerik.com/

Table of Contents

Hypertext Markup LanguageHTML ConceptsHTML Document StructureHTML Common ElementsSection ElementsSemantic Structural Tags

2

Hypertext Markup Language

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

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

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

http://en.wikipedia.org/wiki/HTML5#Plan_2014

http://en.wikipedia.org/wiki/HTML5#Plan_2014

HTML TerminologyTags, Attributes and Elements

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

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

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

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

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>

HTML TerminologyLive Demo

HTML Document StructureHTML Document, Doctype, Head, Body

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>

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

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>

HTML Document StructureLive Demo

HTML Common ElementsUsed in 90% of all the sites

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

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>

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>

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>

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>

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>

HTML Common ElementsLive Demo

Section ElementsThe <div> and The <span>

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>

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>

Semantic Structural Tags

The Structure of a Web Page

A sample layout structure of a Web Page

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>

The HTML 4 WayLive Demo

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>

Semantic Structural TagsLive Demo

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

http://validator.w3.org/

http://validator.w3.org/

форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно

програмиране за деца – безплатни курсове и уроцибезплатен 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

http://html5course.telerik.com/

http://html5course.telerik.com/

Exercises

1. Write an HTML page like the following:* Use headings, divs, paragraphs and ul

40

Exercises (2)

Write an HTML page like1. the following:

41

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

html fundamentals by telerik academy

Education