1 / 23

HTML Building Basics for Web Page Creation

Learn the fundamental concepts of HTML for creating web pages, including tags, structures, text formatting, lists, tables, links, and color definitions. Practice exercises and resources provided.

farrah
Télécharger la présentation

HTML Building Basics for Web Page Creation

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. 13 February Building a Web Page

  2. HTML Files • Two types of information • Text • Instructions on how to display • Instructions are in the form of tags • Tags are indicated by < >

  3. Processing HTML BROWSER HTML processor (software prgram) • Interprets HTML • Performs the actions instructions data text, pictures, etc. HTML tags

  4. General Structure: HTML Page <html> <! --- most important item in head is the title --- > <head><meta content="text/html"><title>Put your title here</title> </head> <! --- body is where the “good stuff” is --- > <body> What will appear on the page <br> Here … and there </body> </html> WARNING: This is not a complete page. It will not work.

  5. Observations • Two types of commands • Single commands < command > • Start/end commands <c> .. </c> • Logically, what is the difference between them? • Tags can have additional information associated with them -- attributes • Blanks don’t matter

  6. Algorithm exercise:How does Find work? • Tags and text are all characters • Question: Will Find get words that are tags (e.g., Find on “body”)? • Describe the algorithm

  7. HTML Web Resources Tutorial http://www.htmlcodetutorial.com/ Practice http://www.w3schools.com/html/default.asp Cheat Sheet: Bare Bones Guide to HTML http://werbach.com/barebones/download.html

  8. Special symbols • < and > are special symbols with special meanings • How would you print A < B ? • Suggestions? • &lt; for < and &gt; for > • & is an escape symbol, which means that it is handled specially • Means that you need a special way to display “&” too: &amp;

  9. Fundamental Page Elements • Within <head> • <title> -- what will appear at the top of the window • Within <body> • Attributes on <body> • Background color or picture • Colors for links • Will discuss colors and pictures later

  10. Text Attributes • Effects • Bold <b> </b> • Italic <i> </i> • Underline <u> </u> • Alignment ALIGN=LEFT|RIGHT|CENTER|JUSTIFY • Attribute on paragraph, heading, … • Font <font> </font> with attributes • face • color • Size • More modern way of defining many attributes is a style sheet, which collects the information and let’s you reuse it • Let’s do formatting without Mozilla composer • Can use cheat sheet: http://werbach.com/barebones/download.html

  11. Structural Components • Headings <h> </h> • Citations <cite> </cite> • Quotations <q> </q> • Why do you want this instead of just format? • Presentation – how it looks • Semantics – what it means

  12. HTML Getting You Down? • Humor Break

  13. Lists and Tables • Regular text is a paragraph • Lists are more fixed formats • Ordered • Bulleted • <ul> <li> </li> </ul> • Unordered • Numbers or letters • <ol> <li> </li> </ul> • Definition • Terms and definitions • <dl> <dt> </dt> <dd> </dd> </dl> • Tables • Two dimensions • Format options • Headings

  14. Tables • Need to define • Table <table> </table> • Row <tr> </tr> • Header (optional) <th> </th> • Data <td> </td> • Caption (optional) <caption> </caption> • Formatting • size • Borders • Can contain anything • Other tables • Pictures • …

  15. Animation on a Computer • Let’s look at some animated clips • What did you see? • How many colors? • Motion? • Is sound the same?

  16. Colors in HTML • What are the three primary colors? • HTML uses an RGB (Red-Green-Blue) definition • Values are 0-255. • (0,0,0) and (255,255,255) represent black and white. Which is which? • Mixing paint vs. mixing light • (0,0,0) = black; (255,255,255) = white

  17. How to indicate colors • There are a set of predefined colors that you can use • Or you can write them out as rgb (200, 130, 125)

  18. Referencing Other Pieces • Access to pictures and links • Most common error • Need complete information for an external picture or link • Need to make sure local references are moved with the page

  19. Retrieving information on a computer • Accessing local information • Accessing remote information • How does networking work?

  20. Links • General model • Anchor to click on • Pointer to the page • Types • Internal • Page • Site • External

  21. HTML Internal Links • Internal points are called anchors • To create an anchor point • <a name=“anchor"></a> • To move to an anchor point • <a href="#anchor">Link text</a> • What differences do you observe? • Two items • Anchor is a point, not a piece of text • Anchor points have a “#” pre-pended to the name

  22. HTML Local Links • Other pages that are always kept with the current one • Not only the same machine, but the same folder • All pages are automatically defined as access points • Connect with the same access tag • <a href=“other page">Link text</a>

  23. Pictures • Inserting with <img> tag • Positioning • Borders • Size

More Related