HTML 4.0

1,266 views

Published on

http://elabnody.net/learn/wd/WD_CH03_HTML.pdf

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,266
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
120
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML 4.0

  1. 1. Mohamed ElabnodyHTML 4.0http://www.Elabnody.netElabnody@msn.comLecture (3)2013
  2. 2. HyperText Markup Language
  3. 3. Outline Introduction to HTML HTML Elements Basic HTML Tags HTML Text Formatting HTML Character Entities HTML Links HTML Frames HTML Tables HTML Lists HTML Forms HTML Images HTML Backgrounds HTML Colors HTML Fonts HTML Styles HTML Head HTML Meta HTML Scripts3www.elabnody.net
  4. 4. 3.1 Introduction to HTML HTML stands for Hyper Text MarkupLanguage An HTML file is a text file containing smallmarkup tags The markup tags tell the Web browserhow to display the page An HTML file must have an htm or htmlfile extension An HTML file can be created using asimple text editorwww.elabnody.net 4
  5. 5. Document Structurewww.elabnody.net 5< / HTML>< HTML >HeaderBody
  6. 6. Example<html><head><title>Title of page</title><meta_tags/></head><body>This is my first homepage. <b>This text is bold</b></body></html>www.elabnody.net 6
  7. 7. 3.2 HTML Elements HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters < and > The surrounding characters are called angle brackets HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag isthe end tag The text between the start and end tags is the elementcontent HTML tags are not case sensitive, <b> means the same as<B>www.elabnody.net 7
  8. 8. 3.3 Basic HTML Tags Headings<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3><h4>This is a heading</h4><h5>This is a heading</h5><h6>This is a heading</h6> Paragraphs<p>This is a paragraph</p><p>This is another paragraph</p>www.elabnody.net 8
  9. 9. 3.3 Basic HTML Tags Line Breaks<p>This <br> is a para<br>graph with line breaks</p> Comments in HTML<!-- This is a comment -->www.elabnody.net 9Tag Description<html> Defines an HTML document<body> Defines the documents body<h1> to <h6> Defines header 1 to header 6<p> Defines a paragraph<br> Inserts a single line break<hr> Defines a horizontal rule
  10. 10. 3.4 HTML Text Formatting Text Formatting Tagswww.elabnody.net 10Tag Description<b> Defines bold text<big> Defines big text<em> Defines emphasized text<i> Defines italic text<small> Defines small text<strong> Defines strong text<sub> Defines subscripted text<sup> Defines superscripted text<ins> Defines inserted text<del> Defines deleted text
  11. 11. 3.4 HTML Text Formatting "Computer Output" Tagswww.elabnody.net 11Tag Description<code> Defines computer code text<kbd> Defines keyboard text<samp> Defines sample computer code<tt> Defines teletype text<var> Defines a variable<pre> Defines preformatted text
  12. 12. 3.4 HTML Text Formatting Citations, Quotations, and Definition Tagswww.elabnody.net 12Tag Description<abbr> Defines an abbreviation<acronym> Defines an acronym<address> Defines an address element<bdo> Defines the text direction<blockquote> Defines a long quotation<q> Defines a short quotation<cite> Defines a citation<dfn> Defines a definition term
  13. 13. 3.5 HTML Character Entities Character Entitieswww.elabnody.net 13Result Description Entity Name Entity Numbernon-breaking space &nbsp;  < less than &lt; <> greater than &gt; >& ampersand &amp; &" quotation mark &quot; " apostrophe &apos; '¢ cent &cent; ¢£ pound &pound; £¥ yen &yen; ¥§ section &sect; §© copyright &copy; ©® registered trademark &reg; ®× multiplication &times; ×÷ division &divide; ÷™ trademark &trade; ™
  14. 14. 3.6 HTML Links The Anchor Tag and the Href Attribute<a href="url">Text to be displayed</a><a href="http://www.elabnody.net/">VisitElabnody.net!</a> The Target Attribute<a href="http://www.elabnody.com/"target="_blank">Visit Elabnody.com!</a>www.elabnody.net 14Visit Elabnody.net!openselabnody.netin new window
  15. 15. 3.6 HTML Links The Anchor Tag and the Name Attribute <a name="label">Text to be displayed</a> The line below defines a named anchor:<a name="tips">Useful Tips Section</a> To link directly to the "tips" section, add a # signand the name of the anchor to the end of a URL,like this:<a href="http://www.elabnody.net/help.html#tips"> A hyperlink to the Useful Tips Section fromWITHIN the file<a href="#tips">Jump to the Useful Tips Section</a>www.elabnody.net 15
  16. 16. 3.7 HTML Frames HTML Frames With frames, you can display more than one Webpage in the same browser window. The disadvantages of using frames are: The web developer must keep track of moreHTML documents It is difficult to print the entire page The Frameset Tag The <frameset> tag defines how to divide thewindow into frames Each frameset defines a set of rows or columns The values of the rows/columns indicate theamount of screen area each row/column willoccupywww.elabnody.net 16
  17. 17. 3.7 HTML Frames 3.7 HTML Frames<frameset cols="25%,75%"><frame src="frame_a.htm"><frame src="frame_b.htm"></frameset>www.elabnody.net 17Tag Description<frameset> Defines a set of frames<frame> Defines a sub window (a frame)<noframes> Defines a noframe section for browsers thatdo not handle frames<iframe> Defines an inline sub window (frame)BannerMenu ContentFooter
  18. 18. 3.8 HTML Tables Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag),and each row is divided into data cells (with the<td> tag).<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>www.elabnody.net 18
  19. 19. 3.8 HTML Tables Headings in a Table<table border="1"><tr><th>Heading</th><th>Another Heading</th> </tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td> </tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td> </tr></table>www.elabnody.net 19
  20. 20. 3.8 HTML TablesTag Description<table> Defines a table<th> Defines a table header<tr> Defines a table row<td> Defines a table cell<caption> Defines a table caption<colgroup> Defines groups of table columns<col> Defines the attribute values for one or more columns in atable<thead> Defines a table head<tbody> Defines a table body<tfoot> Defines a table footerwww.elabnody.net 20
  21. 21. 3.9 HTML Lists Unordered Lists<ul><li>Coffee</li><li>Milk</li></ul> Ordered Lists<ol><li>Coffee</li><li>Milk</li></ol>www.elabnody.net 21
  22. 22. 3.9 HTML Lists Definition Lists<dl><dt>HTTP</dt><dd> Hyper Text Transfer Protocol </dd><dt>HTML</dt><dd> Hyper Text Mark-up Language </dd></dl>www.elabnody.net 22Tag Description<ol> Defines an ordered list<ul> Defines an unordered list<li> Defines a list item<dl> Defines a definition list<dt> Defines a definition term<dd> Defines a definition description
  23. 23. 3.10 HTML Forms HTML Forms are used to select differentkinds of user input. A form is defined with the <form> tag. Input Text Fields<form>First name: <input type="text" name="firstname"><br />Last name: <input type="text" name="lastname"></form>www.elabnody.net 23
  24. 24. 3.10 HTML Forms Input Radio Buttons<form><input type="radio" name="sex" value="male"> Male <br /><input type="radio" name="sex" value="female"> Female</form> Checkboxes<form><input type="checkbox" name="bike">I have a bike <br /><input type="checkbox" name="car">I have a car</form>www.elabnody.net 24
  25. 25. 3.10 HTML Forms The Forms Action Attribute and theSubmit Button<form name="input"action="html_form_action.asp"method="get">Username:<input type="text" name="user"><input type="submit" value="Submit"></form>www.elabnody.net 25
  26. 26. 3.10 HTML Forms Form Tagswww.elabnody.net 26Tag Description<form> Defines a form for user input<input> Defines an input field<textarea> Defines a text-area (a multi-line text inputcontrol)<label> Defines a label to a control<fieldset> Defines a fieldset<legend> Defines a caption for a fieldset<select> Defines a selectable list (a drop-down box)<optgroup> Defines an option group<option> Defines an option in the drop-down box<button> Defines a push button
  27. 27. 3.11 HTML Images The syntax of defining an image:<img src="url"> The Alt Attribute<img src="boat.gif" alt="Big Boat">www.elabnody.net 27
  28. 28. 3.12 HTML Backgrounds Backgrounds<body background="clouds.gif"><bodybackground="http://www.elabnody.com/clouds.gif"> Bgcolor<body bgcolor="#000000"><body bgcolor="rgb(0,0,0)"><body bgcolor="black">www.elabnody.net 28
  29. 29. 3.13 HTML Colors Colors are displayed combining RED,GREEN, and BLUE light sources.color = “red” (Browser compatibility issues)color = “#FF0000”values vary from 00 to FF (hexadecimal)0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,fwww.elabnody.net 29RedGreenBlue#FF FF FF
  30. 30. 3.13 HTML Colors Color Valueswww.elabnody.net 30
  31. 31. 3.14 HTML Fonts The HTML <font> Tag<p><font size="2" face="Verdana">This is a paragraph.</font></p><p><font size="3" face="Times” color=“red”>This is another paragraph.</font></p>www.elabnody.net 31
  32. 32. 3.15 HTML Styles External Style Sheet<head><link rel="stylesheet" type="text/css"href="mystyle.css"></head> Internal Style Sheet<head><style type="text/css">body {background-color: red}p {margin-left: 20px}</style></head>www.elabnody.net 32
  33. 33. 3.15 HTML Styles Inline Styles<p style="color: red; margin-left: 20px">This is a paragraph</p> Style Tagswww.elabnody.net 33Tag Description<style> Defines a style definition<link> Defines a resource reference<div> Defines a section in a document<span> Defines a section in a document
  34. 34. 3.16 HTML Head Information Inside the Head Element According to the HTML standard, only a fewtags are legal inside the head section. Theseare: <base>, <link>, <meta>, <title>, <style>,and <script>.www.elabnody.net 34Tag Description<head> Defines information about the document<title> Defines the document title<base> Defines a base URL for all the links on a page<link> Defines a resource reference<meta> Defines meta information<!DOCTYPE> Defines the document type. This tag goesbefore the <html> start tag.
  35. 35. 3.17 HTML Meta keywords for Search Engines This meta element defines a description ofyour page:<meta name="description" content="Free Webtutorials on HTML, CSS, XML, and XHTML"> This meta element defines keywords for yourpage:<meta name="keywords" content="HTML, DHTML,CSS, XML, XHTML, JavaScript, VBScript">www.elabnody.net 35
  36. 36. 3.18 HTML Scripts Insert a Script into HTML Page A script in HTML is defined with the <script> tag.Note that you will have to use the type attributeto specify the scripting language.<html><head></head><body><script type="text/javascript">document.write("Hello World!")</script></body></html>www.elabnody.net 36
  37. 37. 3.18 HTML Scripts JavaScript:<script type="text/javascript"><!--document.write("Hello World!")//--></script><noscript>Your browser does not support JavaScript!</noscript> VBScript:<script type="text/vbscript"><!--document.write("Hello World!")--></script><noscript>Your browser does not support VBScript!</noscript>www.elabnody.net 37
  38. 38. Summary This tutorial has taught you how to useHTML to create your own web site. HTML is the universal markup language forthe Web. HTML lets you format text, add graphics,create links, input forms, frames andtables, etc., and save it all in a text filethat any browser can read and display. The key to HTML is the tags, whichindicates what content is coming up.www.elabnody.net 38
  39. 39. Whats Next? CSS CSS is used to control the style and layout ofmultiple Web pages all at once. With CSS, all formatting can be removed fromthe HTML document and stored in a separatefile. JavaScript JavaScript can make your web site moredynamic. A static web site is nice when you just want toshow flat content, but a dynamic web site canreact to events and allow user interaction.www.elabnody.net 39
  40. 40. www.elabnody.net 40CSS

×