1 / 23

Introduction to HTML Formatting, Spacing, & Text Stuff

Introduction to HTML Formatting, Spacing, & Text Stuff. Before We Begin. Find the file you created previously Open it in Notepad. Background Info. HTML files are ‘free form’ ‘Enters’ and multiple spaces are ignored Don’t use spaces, tabs, and enters to format your text

laura-vincent
Download Presentation

Introduction to HTML Formatting, Spacing, & Text Stuff

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. Introduction to HTMLFormatting, Spacing, & Text Stuff

  2. Before We Begin • Find the file you created previously • Open it in Notepad

  3. Background Info • HTML files are ‘free form’ • ‘Enters’ and multiple spaces are ignored • Don’t use spaces, tabs, and enters to format your text • You can format it pretty in Notepad, but the browser will ignore your formatting

  4. Background Info (cont.) • The browser will lump everything into one long single-spaced paragraph • It will use the tags to figure out how to format it • Therefore, you must rely on your HTML to format your web page • If you have a typo or mistake in a tag, the browser will treat it like text

  5. Background Info (cont.) • Once the start tag is turned on, it stays in effect until the end tag is reached • This allows multiple tags to be used together because you can have multiple things turned on at once

  6. Format Tags • Line Break <BR> - forces following text to next line (like a hard return) • Paragraph <P></P> - treats text between the start/end tags as a paragraph and forces 2 line breaks • Horizontal Rule <HR> - draws a horizontal line

  7. Format Tags • In your file, enter this in the body after the line of text you entered previously <HR>Web Design is a wonderful thing. Look – a line break.<BR> <P>This is a paragraph. It’s a great thing. Oh joy!</P> Woop-de-do! 1

  8. Format Tags • Now save your file (File>Save or Ctrl-S) • Display it in the browser • Don’t close Notepad – minimize it • Open ‘My Computer’ or some file folder list • Find your file • Double-click on it

  9. Style Tags • Bold <B></B> - bolds text • Underline <U></U> - underlines text • Italicize <I></I> - italicizes text

  10. Style Tags • Make the changes in white: <HR>Web Design is a <U>wonderful</U> thing. Look – a line break.<BR> <P>This is a paragraph. It’s a <I>great</I> thing. Oh joy!</P> <B>Woop-de-do!</B> 2

  11. Heading Tags • Use the Heading tags to create titles and headings for sections of your page • HTML has six levels of headers: • H1, H2, H3, H4, H5, H6 • H1 is highest importance, H6 is lowest • They also cause line breaks

  12. Heading Tags • Enter this on new line after the other text: <h1>Biggest Size</h1> <h2>Next Biggest</h2> <h3>Average</h3> <h4>Almost Average</h4> <h5>Getting Small</h5> <h6>Smallest Size</h6> 3

  13. Tag Attributes • Used to change the way the tag behaves • It’s sort of an ‘add-on’ • You can use them to set things like: • Size (height, width, length, etc.) • Color • Alignments • Etc., etc.

  14. Tag Attributes • They go right after the tag name inside the brackets <> • You can have more than one on a tag • Use a space to separate them • For start/end tags, they only go on the start tag • Like this: <TAG ATTR1=? ATTR2=?>blah </TAG>

  15. Attribute Examples • Horizontal Rule <HR> • Change width <HR WIDTH=#> (# is some number) • Change height/thickness <HR SIZE=#> • Change both at once <HR WIDTH=# SIZE=#>

  16. Attribute Examples • Font Tag <FONT></FONT> • Change size (1 to 7) <FONT SIZE=#>text</FONT> • Change font face (type of font) <FONT FACE=“{font name}”>text</FONT> • Change both at once <FONT FACE=“Arial” SIZE=3>text</FONT>

  17. Attribute Examples • Alignment • Paragraph Tag <P ALIGN=left/center/right>text</P> • Heading Tag <H1 ALIGN=left/center/right>text</H1> • Center Tag <CENTER>text</CENTER> • Centers everything between the tags

  18. Attribute Examples • Make the changes in white: <FONT SIZE=6 FACE=“Arial”> This is a simple web page. AMAZING!! </FONT> <HR width=500 size=10> ... <P ALIGN=CENTER> 4

  19. Colors • Can be changed on almost anything • Usually set with an attribute • Use color name or hexadecimal code White or #FFFFFF Black or #000000 Red or #FF0000 Green or #00FF00 Blue or #0000FF Yellow or #FFFF00 Gray or #808080 Purple or #800080 Fuchsia or #FF00FF Lime or #00FF00

  20. Colors • If you use a color name the browser doesn’t know, you might get a strange or unpredictable color • Complete lists of colors can be found on the web

  21. Color Examples • Page background – Body tag • <BODY BGCOLOR=“color”> • All text – Body tag • <BODY TEXT=“color”> • Some text – Font tag • <FONT COLOR=“color”>

  22. Color Examples • Make the changes in white: <BODY BGCOLOR=gray TEXT=white> <FONT COLOR=RED ...> ... <HR COLOR=“#0099FF” ...> 5

  23. Color Examples • Now, try out other color options, sizes, attributes, whatever

More Related