1 / 23

HTML: PART ONE

HTML: PART ONE. Creating an HTML Document. It is a good idea to plan out a web page before you start coding Draw a planning sketch or create a sample document in word Preparatory work can weed out errors or point to potential problems. Creating an HTML Document.

roanna-barrett
Download Presentation

HTML: PART ONE

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: PART ONE

  2. Creating an HTML Document • It is a good idea to plan out a web page before you start coding • Draw a planning sketch or create a sample document in word • Preparatory work can weed out errors or point to potential problems

  3. Creating an HTML Document • In planning, identify elements An element is a distinct object in the document, like a paragraph ,a heading, or a page’s title • Formatting features such as boldfaced font, and italicized text may be used • Watch out for the use of underline

  4. White Space and HTML • HTML file documents are composed of text characters and white space. • White space is the blank space, tabs, and line breaks with the file • HTML treats each occurrence of white space as a single blank space • You can use white space to make your document more readable

  5. Marking Elements with Tags • The core building block of HTML is the tag, which marks each element in a document • Properties are additional information that control how the tag is used • A two-sided tag is a tag that contains some document content <TAGE NAME PROPERTIES> Text </TAG>

  6. HTML Syntax • Tags usually come in pairs and are enclosed in left and right angle brackets Opening tag < > Closing tag </> (turns off the feature) • Container Tags- tags that need to be turned on and off and requires <>text</> • Non-container Tags- (empty tag) requires only <>, they do not need to be turned off • HTML Tags are not case sensitive JUST BE CONSISTENT

  7. General HTML Formats • <TAG attributes> • <TAG> text </TAG> • <TAG attributes> text </TAG>

  8. Creating an HTML File • <HTML> Identifies the file as HTML • <HEAD> Contains info about the web page • <TITLE> Favorite Quotes </TITLE> • </HEAD> • <BODY> (Page Content) • </BODY> • </HTML>

  9. Comments • To add comments that are not seen in the browser by the audience <!- - Desired Information - - > • Comments allow you to organize your HTML document so you can find items quickly or explain a section.

  10. Headers • HTML supports six levels of headers <H1> to <H6> • Headers always appear on their own line and are separated by a blank line above and below • To center a Heading: <H1 ALIGN = “CENTER”>Text</H1> • Use the Headings in order within a document. Do not use <H5> heading before <H1>

  11. Paragraph Formatting • <P> Marks the end of a paragraph – inserts a return and a blank line • <BR> Identifies a line break – no blank line • You do not have to close the <P> or the <BR> • <BLOCKQUOTE> Text is indented and has a paragraph line break </BLOCKQUOTE> • <DIV> Identifies a generic block-level element (Such as a paragraph)

  12. Horizontal Rule • <HR> • ALIGN property can be se to left, center, right – default is center • WIDTH property tells what percentage of the width of the page the line should occupy i.e. WIDTH=“50%” means the line is 50% of the page • SIZE= “ “ specifies the line thickness in pixels • There are 72 pixels in an inch

  13. Horizontal Rule • COLOR = “RGB VALUE” (Red, Green, Blue) • Hexidecimal Values = numeric values between RGB • Six number or letters XX(red)XX(green)XX(blue) Example: FFFFFF(white) • Go to http://html-color-codes.com/

  14. Body Tags • To change the background color: <BODY BGCOLOR = “RRGGBB”> • To change the text color: <BODY TEXT= “RRGGBB”> • To use an image as background: • <BODY BACKGROUND=“graphicsfilename”>

  15. Font Face • Over-ride the browser’s choice of font: <FONT FACE = “Arial, Helvetica, Sans Serif”> • Use minimal different font types to increase readability • You can also add the COLOR property to change the font color <FONT COLOR = “ffffff”>

  16. Font Size • You can use regular point size (for example: 10, 12, 14) <FONT SIZE = “12px”> hi there </FONT>

  17. Tags • Character Tags <B> Text will be bold </B> <I> Text will be italicized </I> <U> Text will be underlined </U> • DIV ALIGN attribute Tag (aligns entire paragraph) <DIV ALIGN = “alignment”>text</DIV> Alignment = “left”, “center”, or “right” • Default is “left”

  18. Multiple Tag Order • Tag order to start is closed in reverse order <DIV ALIGN= “CENTER”><B><I>Text (At this point, all tags are open) </I></B></DIV> (At this point, all tags are closed)

  19. Inserting an Image • To insert an image on your page: <IMG SRC=“graphics filename”> • Make sure you include the entire URL if your picture is not saved in the same directory as your web page • You can use the ALIGN property to align the image on the page • <IMG SRC=“graphics filename” ALIGN=“RIGHT”>

  20. Lists • Ordered List = Numeric Order <OL> Begin Ordered List <LI> Item One <LI> Item Two <LI> Item Three </OL> Close Ordered List

  21. Lists • <OL TYPE=“ “> • Ordered List Types: • 1=Numbers (this is default) • I= Uppercase Roman Numerals • i= Lowercase Roman Numerals • A=Uppercase Letters • a= Lowercase letters

  22. Lists • Unordered Lists • List with no particular order • Browsers will add a bullet before each item • <UL> Open unordered List • <LI> Item One • <LI> Item Two • </UL> Close Unordered List

  23. Summary: Tips for Good HTML Code • Use line breaks and indented text to make your HTML file easier to read • Insert comments into your HTML fine to document your work • Be consistent in entering in your tags and attribute names (all lowercase) • Place all attribute values in quotes • Close all two-sided tags • Test your Web page on all relevant browsers

More Related