Chapter 1 - Basic HTML

Views:
 
Category: Entertainment
     
 

Presentation Description

No description available.

Comments

By: dishashevgaon (119 month(s) ago)

PLEASE ALLOW ME DOWNLOAD THIS SLIDES

By: antonypredeep (119 month(s) ago)

try downloading now...

 

By: mandeep123456 (139 month(s) ago)

Please allow me to download this ppt

By: kingtoot (141 month(s) ago)

hi thank you for that great efort

Presentation Transcript

Chapter 1 : 

Chapter 1 Basic HTML

Overview : 

Overview HTML? Editing HTML HTML Examples Headers Linking Images Special characters and more line breaks Unordered list Nested and ordered list References

Introduction : 

Introduction The WWW uses 3 technologies HTML (to write web pages) HTTP (to transmit those pages) A web browser A program used to receive the data, interpret it and display the result.

HTML? : 

HTML? Hyper Text Markup Language Not a programming language A markup language Separation of the presentation of the document from the structure of the document’s information Based on the technology of the World Wide Web Consortium.

HTML? (cont.) : 

HTML? (cont.) A HTML document can contain: Flashy elements Graphics Animation Video clips Audio sounds Interactive games

HTML? (cont.) : 

HTML? (cont.) HTML isn’t just for web pages anymore Create corporate internets Flashy emails News postings User interface for applications (web forms)

Editing HTML : 

Editing HTML HTML documents Source-code form Text editor (e.g. Notepad, Wordpad, emacs, etc.) .html or .htm file-name extension Web server Apache, Internet Information Services (I I S) Stores HTML documents Web browser Requests HTML documents

HTML Examples : 

HTML Examples HTML Structure Comments <!-- and end with --> <html> element <head> element Head section Title of the document (<title> tag) Style sheets (<link> tag) and scripts (<script> tag), … <body> element Body section Page’s content the browser displays Start tag attributes (provide additional information about an element) name and value (separated by an equal sign) End tag

HTML Examples (cont.) : 

HTML Examples (cont.) <html> <head> <TITLE>My First Home Page</TITLE> </head> <body> <H1>Dr. Djamel’s HTML Page</H1> <P>Hi World, welcome to my HTML page!</P> <P>Enjoy!</P> </body> </html>

HTML Examples (cont.) : 

HTML Examples (cont.)

HTML Examples (enhancement) : 

HTML Examples (enhancement) <html> <head> <TITLE>My First Home Page</TITLE> </head> <body> <H1>Dr. Djamel’s HTML Page</H1> <P>Hi World, welcome to my HTML page!</P> <P>Enjoy!</P> <P ALIGN=CENTER>Hobbies</P> </body> </html>

HTML Examples (enhancement) (cont.) : 

HTML Examples (enhancement) (cont.)

Headers : 

Headers 6 headers (Header elements) H1 through H6

Headers (cont.) : 

Headers (cont.) <html> <head> <TITLE>Headers</TITLE> </head> <body> <H1>Level 1 Header</H1> <H2>Level 2 Header</H2> <H3>Level 3 Header</H3> <H4>Level 4 Header</H4> <H5>Level 5 Header</H5> <H6>Level 6 Header</H6> </body> </html>

Headers (cont.) : 

Headers (cont.)

Linking : 

Linking Hyperlink References other sources such as HTML documents and images Both text and images can act as hyperlinks Created using the <a> (anchor) element Attribute href Specifies the location of a linked resource Link to e-mail addresses using mailto: URL <strong> tag Bold

links.html(1 of 2) : 

links.html(1 of 2)

contact.html(1 of 1) : 

contact.html(1 of 1)

Images : 

Images Three most popular formats Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Portable Network Graphics (PNG) img element src attribute Specifies the location of the image file width and height br element Line break

picture.html(1 of 1) : 

picture.html(1 of 1)

nav.html(1 of 2) : 

nav.html(1 of 2)

nav.html(2 of 2) : 

nav.html(2 of 2)

Special Characters & More Line Breaks : 

Special Characters & More Line Breaks Character entity references (in the form &code;) Numeric character references (e.g. &#38;) del Strike-out text sup Superscript text sub Subscript text <hr /> Horizontal rule (horizontal line)

contact2.html(1 of 2) : 

contact2.html(1 of 2)

Unordered lists : 

Unordered lists Unordered list element ul Creates a list in which each item begins with a bullet symbol (called a disc) li (list item) Entry in an unordered list

Nested and Ordered Lists : 

Nested and Ordered Lists Represent hierarchical relationships Ordered lists (ol) Creates a list in which each item begins with a number

Special characters : 

Special characters Character entities have two functions: escaping special characters displaying other characters not available in the plain ASCII character set. Example &lt; the escape sequence for < &gt; the escape sequence for > &amp; the escape sequence for &

Special Characters (cont.) : 

Special Characters (cont.) <html> <head> <TITLE>My First Home Page</TITLE> </head> <body> <H1>Dr Djamel’s HTML Page</H1> <P>Hi World, welcome to my HTML page!</P> <P>Enjoy!</P> <PRE>Here is the Ampersand: &amp;, greater: &gt;, and lesser: &lt;. </PRE> </body> </html>

References : 

References www.w3schools.com/html/default.asp http://www.visibone.com/colorlab/ http://imbolc.ucc.ie/~pflynn/books/htmlcard.html