Download presentation
Presentation is loading. Please wait.
1
Web Design and Development
Lecture # 02 Instructor: Rida Noor Department of Computer Science
2
Table of Contents Introduction to HTML How the Web Works?
What is a Web Page? My First HTML Page Basic Tags: Hyperlinks, Images, Formatting Headings and Paragraphs HTML in Details The <!DOCTYPE> Declaration The <head> Section: Title, Meta, Script, Style
3
How the Web Works? WWW use classical client / server architecture
* 07/16/96 How the Web Works? WWW use classical client / server architecture HTTP is text-based request-response protocol HTTP Page request HTTP Server response Server running Web Server Software (e.g Apache) Client running a Web Browser (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
4
What is a Web Page? Web pages are text files containing HTML
* 07/16/96 What is a Web Page? Web pages are text files containing HTML HTML – Hyper Text Markup Language The markup tags provide information about the page content structure (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
5
* 07/16/96 Creating HTML Pages An HTML file must have an .htm or .html file extension HTML files can be created with text editors: NotePad Or HTML editors (WYSIWYG Editors): Microsoft FrontPage Macromedia Dreamweaver Visual Studio (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
6
Text, Images, Tables, Forms
HTML Basics Text, Images, Tables, Forms
7
HTML Structure HTML is comprised of “tags”
* 07/16/96 HTML Structure HTML is comprised of “tags” Begins with <html> and ends with </html> Elements (tags) are nested one inside another: Tags have attributes: HTML describes structure using two main sections: <head> and <body> <html> <head> </head> <body> </body> </html> <img src="logo.jpg" alt="logo" /> (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
8
* 07/16/96 HTML Code Formatting 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. For performance reasons, formatting can be sacrificed (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
9
First HTML Page test.html <!DOCTYPE HTML> <html>
* First HTML Page 07/16/96 test.html <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
10
First HTML Page: Tags Opening tag Closing tag
* 07/16/96 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. (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
11
First HTML Page: Header
* 07/16/96 First HTML Page: Header HTML header <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
12
First HTML Page: Body HTML body <!DOCTYPE HTML> <html>
* 07/16/96 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 (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
13
Some Simple Tags Hyperlink Tags Image Tags Text formatting tags
* 07/16/96 Some Simple Tags Hyperlink Tags Image Tags Text formatting tags <a href=" title=“Google">Link to Google</a> <img src="logo.gif" alt="logo" /> This text is <em>emphasized</em> <br />new line<br /> This one is <strong>more emphasized</strong> (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
14
Simple Tags some-tags.html <!DOCTYPE HTML> <html>
* 07/16/96 Simple Tags some-tags.html <!DOCTYPE HTML> <html> <head> <title>Simple Tags Demo</title> </head> <body> <a href=" title=“Google”>This is a link.</a> <br /> <img src="logo.gif" alt="logo" /> <strong>Bold</strong> and <em>italic</em> text. </body> </html> (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
15
Attribute alt with value "logo"
Tags Attributes Tags can have attributes Attributes specify properties and behavior Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value" Example: Attribute alt with value "logo" <img src="logo.gif" alt="logo" />
16
Headings and Paragraphs
* Headings and Paragraphs 07/16/96 Heading Tags (h1 – h6) Paragraph Tags Sections: div and span <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> (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*
17
Headings and Paragraphs
headings.html <!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>
18
THANK YOU
Similar presentations
