1 / 21

HTML – The Basics

HTML – The Basics. Ahmad AL Kawam. The Internet. The World Wide Web Created in 1989 European Laboratory for Particle Physics (Geneva Switzerland) Purpose Provide an easy way to access cross-referenced documents that exist on the internet. Hyper text. The World Wide Web Hypertext links

kidderm
Télécharger la présentation

HTML – The Basics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML – The Basics Ahmad AL Kawam

  2. The Internet • The World Wide Web • Created in 1989 • European Laboratory for Particle Physics (Geneva Switzerland) • Purpose • Provide an easy way to access cross-referenced documents that exist on the internet

  3. Hyper text • The World Wide Web • Hypertext links • Contain reference to locate and open specific documents • Hypertext Markup Language (HTML) • Language used to design web pages (documents) • Web Browser • Program that displays HTML documents

  4. URL • Uniform Resource Locator (URL) • Consists of 4 parts: • Protocol  Hyper Text Transfer Protocol (HTTP) • Domain Name  or Internet Protocol (IP) address • Directory • Filename • Specific document filename • index.(s)htm(l) or default.(s)htm(l)

  5. URL

  6. HTML • HyperText Markup Language • A method of encoding for web pages that tells (suggests) how to display the content • HTML commands are called tags and are enclosed in angle brackets • opening tag < > • closing tag < / >

  7. Explore a web page • Right click on a web page • select ViewSource • Look for the parts of the page – the tags • head • body • title • Pairs of tags • Opening tags < > • Closing tags < / > • UPPER CASE vs. lower case?

  8. Parts of the Page • HTLM tags indicate this is an HTML document: <html> < /html> Each page has 2 parts: • Head – holds information like the page title <head> </head> • Body – holds the visible text and images <body> </body>

  9. A Basic Web Page <html><head><title> MY PAGE - Home</title></head><body> Hello, world! </body> </html>

  10. Test Page Go to your directory on the c: drive. Save your NotePad file as index.html To view it, open a browser and enter file://c:/yourDirectory/index.html Now, view the source using the right mouse button. Note: file not http because we are reading a local page.

  11. Headings • Headings: <h#> My Heading </h#> where # is a number between 1 and 6 with 1 being the largest. Example: <h1> My Web Page </h1> <h3> Activities </h3> <h5> Computer Workshop </h5>

  12. Images Include the source file and path (location) as well as alternate text for those who can not load the picture or need to use a text reader. <img src=“picture.gif" width=196 height=78 alt=“This is what you should see" border="0">

  13. Other Common Tags • Paragraphs <p> </p> • Forced Break <br> </br> • Emphasis <em> </em> • Bold <b> </b> • Italics <i> </i> • Alignment <p align=left/right/center> </p> • Default is left.

  14. Unnumbered Lists <ul> • Output • My list • list item 1 • list item 2 • list item 3 HTML <ul>My list <li> list item 1 <li> list item 2 <li> list item 3 </ul> Note: list items can be multiple lines or paragraphs

  15. Numbered or Ordered Lists <ol> • Output • My list • 1. list item 1 • 2. list item 2 • 3. list item 3 HTML <ol>My ordered list <li> list item 1 <li> list item 2 <li> list item 3 </ol> Note: list items can be multiple lines or paragraphs

  16. Horizontal Rules/Lines <hr> </hr> Example with parameters: <hr> size=4 width=“75”% </hr> Produces a line size 4 that goes across 75% of the page.

  17. Links to Other Pages Use the anchor tag <a … > </a> • Link to another page <a href=“page2.htm”>Page 2 </a> where page2.htm is located in the same directory • Link to a web page <a href=“www.yahoo.com/mypage/page2.htm”>Page 2 </a> Note: some OS are case sensitive so be consistent in names.

  18. Links to Specific Sections • Link to another section of a page 1. Create a named anchor in the section <h2><a name=“S2”>Section 2 </a></h2> 2. Create the link in the same document or another document. <a href=“MyWebPage.htm#P2">Section 2</a>

  19. Basic Settings • Background: bgcolor=#ffffff • Font and alternates: {font-family: Arial, Helvetica, sans-serif } • Font color: text="#333333"

  20. Basic Settings • Links: • Link: link="#333333" • Visited link: vlink="#333333" • Active link: alink="#333333" • Margins: leftmargin=0 topmargin=0 marginwidth=0 marginheight=0

  21. Example <html><head><title> MY PAGE - Home</title></head><body bgcolor=#ffffff leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 text="#333333" link="#333333" vlink="#333333" alink="#333333"> Hello, world! </body> </html>

More Related