1 / 27

HTML

HTML. Understanding HTML. Web pages are made up of text and graphics you want to display, along with links to other documents. You use HTML (Hypertext Markup Language) to: provide information to the browsers as to how to display pages (structure of the document) create links.

odele
Download Presentation

HTML

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

  2. Understanding HTML • Web pages are made up of text and graphics you want to display, along with links to other documents. • You use HTML (Hypertext Markup Language) to: • provide information to the browsers as to how to display pages (structure of the document) • create links.

  3. Understanding HTML • HTML is a Web’s universal programming language • It’s not specific to any platform, computer brand, or operating system • HTML documents are actually text files with HTML tags embedded. • Each browser expresses the commands in its own way.

  4. How can I see the source code of a Web page? • In Internet Explorer • In Mozilla Firefox

  5. Creating web pages with HTML • If you want to code your page from scratch, you can use Windows Notepad. • Demonstration • You can create your page using an editor such as iWeb, Microsoft Expression Web, KompoZer, Amaya, or Adobe Dreamweaver

  6. Understanding HTML Tags • HTML is a set of codes that you use to create a document. • These codes, called tags, format text, place graphics on the page, and create links. • HTML vs. XHTML

  7. Understanding HTML Tags • HTML tags follow a certain format, or syntax • Each tag begins with an opening angle bracket (<), ends with a closing angle bracket (>) and contains a command between the brackets. • Many of the tags are paired. The first tag indicates the beginning of the command. The closing tag of the pair has the same syntax as the opening tag, but includes a forward slash (/) before the command.

  8. Example of paired tags <html> The entire Web document </html>

  9. Using HTML Structure Tags • Always two main sections: HEAD and BODY <html> <head> <title> text that appears in title bar</title> </head> <body> all information that will be displayed on the screen </body> </html>

  10. HTML Structure • Like a sandwich?

  11. Using HTML Structure Tags • Many browsers display the title in a title bar when it is displayed • The body section contains the information – text, graphics, and so on – that will appear on the screen.

  12. Entering Headings in an HTML File • Headings serve to separate text and introduce new topics on Web pages. • The heading tags used for this purpose vary in size. • The size range from <h1> through <h6>, with <h1> being the largest.

  13. Entering Text in Paragraph Format • Web pages generally contain a significant amount of text, most of which will be in paragraph format • <p> </p> • <p> tag starts a new line and adds some additional vertical space between the line it just displayed and the following line.

  14. Creating a List • Bulleted lists (Unordered Lists) • Numbered lists (Ordered Lists) <ul type = “typeName”> <li>First Item Name</li> <li>Second Item Name</li> </ul> • typeName: disc, square, circle

  15. Creating a List <ol type = “typeName”> <li>First Item Name</li> <li>Second Item Name</li> </ol> • typeName: 1, A, a, I, i

  16. Adding Background Color • The bgcolor attribute lets you change the background color of the Web page. • Located in the body tag • See common Web Page Colors and their hexadecimal equivalents + sixteen predefined colors

  17. Adding an Horizontal Rule • Horizontal rules are graphical images that act as dividers in a Web page. • <hr> tag

  18. Alignment Attribute • align attribute • <h1 align= “center”> • left, center, or right

  19. FONT Attributes • font tag <font> </font> • Font Attributes:

  20. Bold and Italic • Bold: <b>….</b> • Italic: <i>…..</i>

  21. Web Page Images • Used as: • Background • Pictures or graphics on the web page • Image Types: • JPEG (Joint Photographic Experts Groups) files: A graphic image that is saved using compression techniques to make it smaller for download on the Web. It supports more colors and resolutions than the other file types => good for complex images such as scanned photographs.

  22. Background Images • Use the “background” attribute for the body tag <body background=“assets/stripes.jpg”>

  23. Inserting an Image and Wrapping Text • src attribute with border, height, width, align • border value: 0 => No border • 1 => Thin border • 2 => Thicker border ….. • align value: left, right, bottom, top, middle <img src= “pizza.jpg” border=“1” height=“119” width=“182” align= “left” alt=“Delicious Pizza”>

  24. Adding a Link • Uses <a> and </a> tags • Three types of links: • E-mail links • Internal links • External links • mailto word <a href=“mailto:caroline.collier@gcsu.edu”>Collier</a>

  25. E-mail links • mailto word <a href=“mailto:caroline.collier@gcsu.edu”>Collier</a>

  26. Internal Links <a href= “menu.htm”>here</a>

  27. External Links <a href= “http://www.yahoo.com”>Yahoo!</a>

More Related