Slide 1

HTML, Text, Images, Tables Nikolay Kostov Telerik Corporation www.telerik.com

Slide 2

1. Introduction to HTML How the Web Works? What is a Web Page? My First HTML Page Basic Tags: Hyperlinks, Images, Formatting Headings and Paragraphs 2. HTML in Details The Declaration The Section: Title, Meta, Script, Style 2

Slide 3

2. HTML in Details The Section Text Styling and Formatting Tags Hyperlinks:, Hyperlinks and Sections Images: Images: Lists:, and Lists:, and 3. The and elements 4. HTML Tables 5. HTML Forms 3

Slide 4

WWW use classical client / server architecture HTTP is text-based request-response protocol 4 Page request Client running a Web Browser Server running Web Server Software (IIS, Apache, etc.) Server response HTTP HTTP

Slide 5

Web pages are text files containing HTML HTML H yper T ext M arkup L anguage 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 5

Slide 6

An HTML file must have an.htm or.html file extension HTML files can be created with text editors: NotePad, NotePad ++, PSPad Or HTML editors (WYSIWYG Editors): Microsoft FrontPage Macromedia Dreamweaver Netscape Composer Microsoft Word Visual Studio 6

Slide 7

Text, Images, Tables, Forms

Slide 8

HTML is comprised of elements and tags Begins with and ends with Begins with and ends with Elements (tags) are nested one inside another: Tags have attributes: HTML describes structure using two main sections: and HTML describes structure using two main sections: and 8

Slide 9

The HTML source code should be formatted to increase readability and facilitate debugging. Every block element should start on a new line. Every nested (block) element should be indented. Browsers ignore multiple whitespaces in the page source, so formatting is harmless. For performance reasons, formatting can be sacrificed 9

Slide 10

10 My First HTML Page My First HTML Page This is some text... This is some text... test.html

Slide 11

My First HTML Page My First HTML Page This is some text... This is some text... 11 Opening tag Closing tag An HTML element consists of an opening tag, a closing tag and the content inside.

Slide 12

My First HTML Page My First HTML Page This is some text... This is some text... 12 HTML header

Slide 13

My First HTML Page My First HTML Page This is some text... This is some text... 13 HTML body

Slide 14 Link to Telerik Web site title="Telerik">Lin"> Link to Telerik Web site title="Telerik">Link to Telerik Web site This text is emphasized. This text is emphasized. new line new line This one is more emphasized. This one is more emphasized."> Link to Telerik Web site title="Telerik">Lin" title=" Hyperlink Tags Image Tags Text formatting tags 14 Link to Telerik Web site title="Telerik">Lin">

Hyperlink Tags Image Tags Text formatting tags 14 Link to Telerik Web site title="Telerik">Link to Telerik Web site This text is emphasized. This text is emphasized. new line new line This one is more emphasized. This one is more emphasized.

Slide 15 This is a link. "Telerik site""> This is a link. "Telerik site">This is a link. Bold and italic text. Bold and italic text.