HTML Fundamentals

HTML Basics HTML, Text, Images, Tables, Forms Doncho Minkov Telerik Mobile Development Course mobiledevcourse.telerik.com Technical Trainer http://www.minkov.it

Table of Contents ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Table of Contents (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

How the Web Works? ,[object Object],[object Object],Client running a Web Browser Server running Web Server Software (IIS, Apache, etc.) HTTP HTTP Server response

What is a Web Page? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Creating HTML Pages ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

HTML Basics Text, Images, Tables, Forms

HTML Structure ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<html xmlns="http://www.w3.org/1999/xhtml"> <html> <head></head> <body></body> </html> <img src="logo.jpg" alt="logo" />

HTML Code Formatting ,[object Object],[object Object],[object Object],[object Object],[object Object]

First HTML Page <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> test.html

First HTML Page: Tags <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> Opening tag Closing tag An HTML element consists of an opening tag, a closing tag and the content inside.

First HTML Page: Header <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> HTML header

First HTML Page: Body <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> HTML body

Some Simple Tags ,[object Object],[object Object],[object Object],<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>

Some Simple Tags – Example <!DOCTYPE HTML> <html> <head> <title> Simple Tags Demo</title> </head> <body> <a href="http://www.telerik.com/" title= "Telerik site">This is a link.</a> <br /> <img src="logo.gif" alt="logo" /> <br /> <strong>Bold</strong> and <em>italic</em> text. </body> </html> some-tags.html

Some Simple Tags – Example (2) <!DOCTYPE HTML> <html> <head> <title> Simple Tags Demo</title> </head> <body> <a href="http://www.telerik.com/" title= "Telerik site">This is a link.</a> <br /> <img src="logo.gif" alt="logo" /> <br /> <strong>Bold</strong> and <em>italic</em> text. </body> </html> some-tags.html

Tags Attributes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<img src="logo.gif" alt="logo" /> Attribute alt with value " logo "

Headings and Paragraphs ,[object Object],[object Object],[object Object],<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>

Headings and Paragraphs – Example <!DOCTYPE HTML> <html> <head><title>Headings and paragraphs</title></head> <body> <h1>Heading 1</h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3> <p>This is my first paragraph</p> <p>This is my second paragraph</p> <div style="background:skyblue"> This is a div</div> </body> </html> headings.html

Headings and Paragraphs – Example (2) <!DOCTYPE HTML> <html> <head><title>Headings and paragraphs</title></head> <body> <h1>Heading 1</h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3> <p>This is my first paragraph</p> <p>This is my second paragraph</p> <div style="background:skyblue"> This is a div</div> </body> </html> headings.html

Headings and Paragraphs Live Demo

Introduction to HTML HTML Document Structure in Depth

Preface ,[object Object],[object Object],[object Object],[object Object]

The < ! DOCTYPE> Declaration ,[object Object],[object Object],[object Object],[object Object],[object Object],<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML vs. XHTML ,[object Object],[object Object],[object Object],[object Object]

XHTML vs. HTML (2) ,[object Object],[object Object],[object Object],<input type="checkbox" checked> <input type="checkbox" checked="checked" />

The <head> Section ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

<head> Section: <title> tag ,[object Object],[object Object],[object Object],<title>Telerik Academy – Winter Season 2009/2010 </title>

<head> Section: <meta> ,[object Object],<meta name="description" content="HTML tutorial" /> <meta name="keywords" content="html, web design, styles" /> <meta name="author" content="Chris Brewer" /> <meta http-equiv="refresh" content="5; url=http://www.telerik.com" />

<head> Section: <script> ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

The <script> Tag – Example <!DOCTYPE HTML> <html> <head> <title>JavaScript Example</title> <script type="text/javascript"> function sayHello() { document.write("<p>Hello World!<p>"); } </script> </head> <body> <script type= "text/javascript"> sayHello(); </script> </body> </html> scripts-example.html

<head> Section: <style> ,[object Object],<html> <head> <style type="text/css"> p { font-size: 12pt; line-height: 12pt; } p:first-letter { font-size: 200%; } span { text-transform: uppercase; } </style> </head> <body> <p>Styles demo.<br /> <span>Test uppercase</span>. </p> </body> </html> style-example.html

Embedding CSS Styles Live Demo

Comments:  Tag ,[object Object],[object Object],<!–- Telerik Logo (a JPG file) --> <img src="logo.jpg" alt=“Telerik Logo"> <!–- Hyperlink to the web site --> <a href="http://telerik.com/">Telerik</a> <!–- Show the news table --> <table class="newstable"> ...

<body> Section: Introduction ,[object Object],[object Object],[object Object],<html> <head><title>Test page</title></head> <body>  </body> </html>

Text Formatting ,[object Object],[object Object]

Text Formatting – Example <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Page Title</title> </head> <body> <h1>Notice</h1> <p>This is a <em>sample</em> Web page.</p> <p><pre>Next paragraph: preformatted.</pre></p> <h2>More Info</h2> <p>Specifically, we’re using XHMTL 1.0 transitional.<br /> Next line.</p> </body> </html> text-formatting.html

Text Formatting – Example (2) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Page Title</title> </head> <body> <h1>Notice</h1> <p>This is a <em>sample</em> Web page.</p> <p><pre>Next paragraph: preformatted.</pre></p> <h2>More Info</h2> <p>Specifically, we’re using XHMTL 1.0 transitional.<br /> Next line.</p> </body> </html> text-formatting.html

Hyperlinks: <a> Tag ,[object Object],[object Object],[object Object],<a href="form.html">Fill Our Form</a> <a href="../parent.html">Parent</a> <a href="stuff/cat.html">Catalog</a>

Hyperlinks: <a> Tag (2) ,[object Object],[object Object],[object Object],[object Object],<a href="http://www.devbg.org" target="_blank">BASD</a> <a href="mailto:bugs@example.com?subject=Bug+Report"> Please report bugs here (by e-mail only)</a>

Hyperlinks: <a> Tag (3) ,[object Object],[object Object],[object Object],[object Object],[object Object],<a href="apply-now.html"><img src="apply-now-button.jpg" /></a> <a href="../english/index.html">Switch to English version</a>

Hyperlinks and Sections ,[object Object],[object Object],<a href="#section1">Go to Introduction</a> ... <h2 id="section1">Introduction</h2> <a href="chapter3.html#section3.1.1">Go to Section 3.1.1</a> <!–- In chapter3.html --> ... <div id="section3.1.1"> <h3>3.1.1. Technical Background</h3> </div>

Hyperlinks – Example <a href="form.html">Fill Our Form</a> <br /> <a href="../parent.html">Parent</a> <br /> <a href="stuff/cat.html">Catalog</a> <br /> <a href="http://www.devbg.org" target="_blank">BASD</a> <br /> <a href="mailto:bugs@example.com?subject=Bug Report">Please report bugs here (by e-mail only)</a> <br /> <a href="apply-now.html"><img src="apply-now-button.jpg” /></a> <br /> <a href="../english/index.html">Switch to English version</a> <br /> hyperlinks.html

Hyperlinks – Example (2) <a href="form.html">Fill Our Form</a> <br /> <a href="../parent.html">Parent</a> <br /> <a href="stuff/cat.html">Catalog</a> <br /> <a href="http://www.devbg.org" target="_blank">BASD</a> <br /> <a href="mailto:bugs@example.com?subject=Bug Report">Please report bugs here (by e-mail only)</a> <br /> <a href="apply-now.html"><img src="apply-now-button.jpg” /></a> <br /> <a href="../english/index.html">Switch to English version</a> <br /> hyperlinks.html

Links to the Same Document – Example <h1>Table of Contents</h1> <p><a href="#section1">Introduction</a><br /> <a href="#section2">Some background</A><br /> <a href="#section2.1">Project History</a><br /> ...the rest of the table of contents...  <h2 id="section1">Introduction</h2> ... Section 1 follows here ... <h2 id="section2">Some background</h2> ... Section 2 follows here ... <h3 id="section2.1">Project History</h3> ... Section 2.1 follows here ... links-to-same-document.html

Links to the Same Document – Example (2) <h1>Table of Contents</h1> <p><a href="#section1">Introduction</a><br /> <a href="#section2">Some background</A><br /> <a href="#section2.1">Project History</a><br /> ...the rest of the table of contents...  <h2 id="section1">Introduction</h2> ... Section 1 follows here ... <h2 id="section2">Some background</h2> ... Section 2 follows here ... <h3 id="section2.1">Project History</h3> ... Section 2.1 follows here ... links-to-same-document.html

Links to the Same Document Live Demo

Images: <img> tag ,[object Object],[object Object],[object Object],<img src="/img/basd-logo.png"> <img src="./php.png" alt="PHP Logo" /> src Location of image file (relative or absolute) alt Substitute text for display (e.g. in text mode) height Number of pixels of the height width Number of pixels of the width border Size of border, 0 for no border

Miscellaneous Tags ,[object Object],[object Object],[object Object],<hr size="5" width="70%" /> <center>Hello World!</center> <font size="3" color="blue">Font3</font> <font size="+4" color="blue">Font+4</font>

Miscellaneous Tags – Example <html> <head> <title>Miscellaneous Tags Example</title> </head> <body> <hr size="5" width="70%" /> <center>Hello World!</center> <font size="3" color="blue">Font3</font> <font size="+4" color="blue">Font+4</font> </body> </html> misc.html

Ordered Lists: <ol> Tag ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<ol type="1"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li> </ol>

Unordered Lists: < u l> Tag ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<ul type="disk"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li> </ul>

Definition lists: <dl> tag ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Lists – Example <ol type="1"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li> </ol> <ul type="disc"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li> </ul> <dl> <dt>HTML</dt> <dd>A markup lang…</dd> </dl> lists.html

HTML Special Characters £ £ British Pound € € Euro " " Quotation Mark ¥ ¥ Japanese Yen — — Em Dash   Non-breaking Space & & Ampersand > > Greater Than < < Less Than ™ ™ Trademark Sign ® ® Registered Trademark Sign © © Copyright Sign Symbol HTML Entity Symbol Name

Special Characters – Example <p>[>>  Welcome   <<]</p> <p>►I have following cards: A♣, K♦ and 9♥.</p> <p>►I prefer hard rock ♫ music ♫</p> <p>© 2006 by Svetlin Nakov & his team</p> <p>Telerik Academy™</p> special-chars.html

Special Chars – Example (2) <p>[>>  Welcome   <<]</p> <p>►I have following cards: A♣, K♦ and 9♥.</p> <p>►I prefer hard rock ♫ music ♫</p> <p>© 2006 by Svetlin Nakov & his team</p> <p>Telerik Academy™</p> special-chars.html

HTML Special Characters Live Demo

Using <DIV> and <SPAN> Block and Inline Elements

Block and Inline Elements ,[object Object],[object Object],[object Object],[object Object],[object Object]

The <div> Tag ,[object Object],[object Object],[object Object],[object Object],<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> div-and-span.html

The <span> Tag ,[object Object],[object Object],[object Object],[object Object],<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> span.html

HTML Tags Index ,[object Object],[object Object]

HTML Basics ,[object Object],http://academy.telerik.com

Exercises ,[object Object],[object Object]

Exercises (2) ,[object Object],[object Object]

Exercises (3) ,[object Object]

Exercises (4) ,[object Object],[object Object]

HTML Fundamentals

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Viewers also liked

Viewers also liked (8)

Similar to HTML Fundamentals

Similar to HTML Fundamentals (20)

More from Doncho Minkov

More from Doncho Minkov (20)

Recently uploaded

Recently uploaded (20)

HTML Fundamentals

Editor's Notes