HTMLHTML
● Hypertext Markup Language
● Language to create documents for www
● Uses tags or markup to define the structure ...
Introductory ConceptsIntroductory Concepts
● IP Address
● Domain Name
● URL (Uniform Resource Locator)
● Hyperlink
● HTTP ...
XML / HTML/ XHTMLXML / HTML/ XHTML
● HTML
● Hypertext Markup Language
● XML
● Extensible Markup Language
● XHTML
● Extensi...
HTML editorsHTML editors
● WYSIWYG
● Adobe Dreamweaver
● Macromedia Frontpage
● Text based
● Notepad
● Notepad++ (free as ...
SciTESciTE
● Downloading the SciTE editor
● http://www.scintilla.org/SciTE.html
Doctype DeclarationDoctype Declaration
● Doctype declaration
● Other Possible Doctypes
http://www.w3.org/QA/2002/04/valid-...
HTML TagsHTML Tags
● http://www.w3schools.com/tags/default.asp
<html>
<head>
<meta name="descrition" content="Free Web tut...
HTML TagsHTML Tags
Headings
<h1> Heading1 </h1>
<h2> Heading2 </h2>
...
...
<h6> Heading6 </h6>
Body
<body bgcolor = color...
HTML TagsHTML Tags
Lists
Unordered List
<ul type = “disc”>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>
“disc” type is the de...
HTML TagsHTML Tags
Definition List
<dl>
<dt> ... </dt>
<dd> ... </dd>
</dl>
Nested List
<ol type = “1”>
<li> Coffee </li>
...
HTML TagsHTML Tags
Images
<img src = “filename.gif” alt = “No image found” />
Links
Link to URL
<a href = “URL”> linktext ...
A simple home page !A simple home page !
Step 1:
Open up the SciTE.
Step 2:
Enable word wrap in SciTE by checking “Option ...
A simple home page !A simple home page !
Step 6:
Insert the body text inside the body tags.
Welcome to Plant World !
For t...
A simple home page !A simple home page !
Step 8:
Lets separate the text into paragraphs and add some header tags.
<h1> Wel...
A simple home page !A simple home page !
Step 11:
Lets add an image logo just below the body tag.
<img src = "plantworldlg...
A simple home page !A simple home page !
Html Tutorial
Upcoming SlideShare
Loading in...5
×

Html Tutorial

199

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
199
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html Tutorial

  1. 1. HTMLHTML ● Hypertext Markup Language ● Language to create documents for www ● Uses tags or markup to define the structure or layout of the web document.
  2. 2. Introductory ConceptsIntroductory Concepts ● IP Address ● Domain Name ● URL (Uniform Resource Locator) ● Hyperlink ● HTTP (Hypertext Transfer Protocol)
  3. 3. XML / HTML/ XHTMLXML / HTML/ XHTML ● HTML ● Hypertext Markup Language ● XML ● Extensible Markup Language ● XHTML ● Extensible Hypertext Markup Language http://www.w3schools.com/
  4. 4. HTML editorsHTML editors ● WYSIWYG ● Adobe Dreamweaver ● Macromedia Frontpage ● Text based ● Notepad ● Notepad++ (free as in both "free speech" and "free beer") – http://notepad-plus-plus.org/ ● SciTE – http://www.scintilla.org/SciTE.html ● Any text editors
  5. 5. SciTESciTE ● Downloading the SciTE editor ● http://www.scintilla.org/SciTE.html
  6. 6. Doctype DeclarationDoctype Declaration ● Doctype declaration ● Other Possible Doctypes http://www.w3.org/QA/2002/04/valid-dtd-list.html XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset HTML 4.01 HTML 4.01 Transitional HTML 4.01 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
  7. 7. HTML TagsHTML Tags ● http://www.w3schools.com/tags/default.asp <html> <head> <meta name="descrition" content="Free Web tutorials" /> <meta name="keywords" content="HTML,CSS,XML,JavaScript" /> <meta name="author" content="Your Name" /> <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" /> <title> My Web Page </title> </head> <body> </body> </html>
  8. 8. HTML TagsHTML Tags Headings <h1> Heading1 </h1> <h2> Heading2 </h2> ... ... <h6> Heading6 </h6> Body <body bgcolor = color, link = color, alink = color, vlink = color, text = color> The content of the document ... </body> color should be in this format #RRGGBB, where RR, GG and BB are the Hex numbers from 00 to FF Paragraph <p> Contents of the paragraph ... </p>
  9. 9. HTML TagsHTML Tags Lists Unordered List <ul type = “disc”> <li> Item 1 </li> <li> Item 2 </li> </ul> “disc” type is the default. Other unordered list types can be : <ul type = “square”> ... </ul> <ul type = “circle”> ... </ul> Ordered List <ol type = “1”> <li> Item 1 </li> <li> Item 1 </li> </ol> “1” is the default type. Other types of ordered list might be <ol type = “A”> ... </ol> <ol type = “a”> ... </ol> <ol type = “I”> ... </ol> <ol type = “i”> ... </ol>
  10. 10. HTML TagsHTML Tags Definition List <dl> <dt> ... </dt> <dd> ... </dd> </dl> Nested List <ol type = “1”> <li> Coffee </li> <li> Tea <ul> <li> Black Tea </li> <li> Green Tea </li> </ul> </li> <li> Milk </li> </ol>
  11. 11. HTML TagsHTML Tags Images <img src = “filename.gif” alt = “No image found” /> Links Link to URL <a href = “URL”> linktext (like click here to visit my website ) </a> Link to Email <a href = “mailto:abc@xyz.com”> Email me </a> Other tags <br /> <hr /> <!-- Comment -->
  12. 12. A simple home page !A simple home page ! Step 1: Open up the SciTE. Step 2: Enable word wrap in SciTE by checking “Option -> Wrap” Step 3: Copy and Paste the following DTD. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Step 4: Create an empty html document by copying and pasting the following tags. <html> <head> </head> <body> </body> </html>
  13. 13. A simple home page !A simple home page ! Step 6: Insert the body text inside the body tags. Welcome to Plant World ! For the finest in indoor and outdoor plants, come to Plant World! Plant World is the premier nursery for all of your planting needs. Our professional landscape design artists can visit your home and make recommendations for plants to use in your home or your yard. Our company - Founded in 1989 by Margaret Anne Coles - Headquartered in Surprise, Arizona - 25 store locations throughout the Southwest Our services - Residential and commercial landscaping - Plant and lawn maintenance - Online information for all varieties of plants To learn more about the Plant World products and services, please browse the Plant World Web site. You can find information on all types of plants, both for indoor and outdoor use. You also can learn about this month's featured desert plants , which have a natural beauty that can enhance any Southwest landscape! Have a question or comment? Call us at (206) 555-PLANT or e-mail us. Step 7: Save it as “index.html” and view in the browser. Don't forget the .html extension !
  14. 14. A simple home page !A simple home page ! Step 8: Lets separate the text into paragraphs and add some header tags. <h1> Welcome to Plant World! </h1> <h3>Our company</h3> <h3>Our services</h3> Step 9: Lets create some lists. <ul> <li>Founded in 1989 by Margaret Anne Coles</li> <li>Headquartered in Surprise, Arizona</li> <li>25 store locations throughout the Southwest</li> </ul> Step 10: Lets add an email link. <a href = "mailto:plantworld@isp.com ?subject=question regarding the plants ">e-mail us</a>
  15. 15. A simple home page !A simple home page ! Step 11: Lets add an image logo just below the body tag. <img src = "plantworldlg.jpg" alt = "Plant world logo" /> Step 12: You can get the image “plantworldlg.jpg” from this location http://cs.gsu.edu/~adhungel1/csc1010/html_practice/plantworldlg.jpg Save this image in the same folder where you saved your index.html file. Step 13: Save and view in the browser
  16. 16. A simple home page !A simple home page !
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×