1 / 30

HTML

HTML. H yper T ext M arkup L anguage. HTML. HTML is NOT case sensitive However, proper coding etiquette if for all <TAGS> to be in ALL CAPS and for text to be in regular sentence form. Basic HTML Tags. Each HTML tag has three basic parts: An open angle bracket (less than sign): <

andra
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 Hyper Text Markup Language

  2. HTML HTML is NOT case sensitive However, proper coding etiquette if for all <TAGS> to be in ALL CAPS and for text to be in regular sentence form.

  3. Basic HTML Tags Each HTML tag has three basic parts: • An open angle bracket (less than sign): < • The text and characters that tell Web browsers what to do • A closing angle bracket (greater than sign): > <HTML>

  4. HTML Tags • Many tags are used in pairs (some stand alone) • Start tags tell the browser where to turn on particular formatting function (like italics) <TAG> • End tags tell the browser where to turn off the function. They include a slash. </TAG> (Container Tag) • Empty tag - <LI> - Stands Alone

  5. LIFO *Important note about paired tags: Tags have to be LIFO: Last In First Out It means that the LAST tag you turn on should always be the FIRST you turn off. <HTML> <BODY> </BODY> </HTML>

  6. Three Sections of an HTML Document • The HTML document • The HEAD section • The BODY section

  7. HTML Section • <HTML></HTML> • The first tag in every HTML document will always be <HTML>, which tells the Web browsers that everything that follows should be treated as a Web page. • The </HTML> tag tells the browser where the page ends.

  8. HEAD Section • <HEAD></HEAD> • Immediately follows the opening <HTML> tag. • Purpose of this section is to provide general information about a particular Web page. • This tag contains the Web page’s title (<TITLE></TITLE> tags) • This section is NOT displayed in the page’s body. • Page’s title will appear at the top of the browser window, in the title bar

  9. BODY Section • <BODY> </BODY> • Follows the HEAD section • Contains all of your Web pages content (text, graphics, etc.)

  10. Saving Web Pages • Save every page as a .html or .htm • Save main page (home page) as index.htm • This is the filename that servers first try to download. If you save your main page as index.htm, you help ensure that it is the first page that your audience will see.

  11. EXAMPLE • <HTML> • <HEAD><TITLE>I’m at the top of the screen in the blue area</TITLE> </HEAD> • <BODY><H1>Basic Example</H1><H2>This is basic coding! </H2> </BODY> • </HTML>

  12. <HTML> • <HEAD><TITLE>I’m at the top of the screen in the blue area</TITLE> </HEAD> • <BODY> H1>Basic Example</H1>< <H2>This is basic coding! </H2> </BODY> • </HTML>

  13. More HTML • By default, browsers read the text of your Web page as a continuous line of single-spaced text.

  14. Adding White Space • White space refers to the amount of empty space on a page. • The more white space on a page, the easier it is to read. • Force browsers to break up text by using : • Paragraph tags • Line breaks • Horizontal lines

  15. Paragraph Tags <P> • Add white space between paragraphs • <P> adds one line of white space • For example: Four score and seven years ago <P> our fathers brought forth <P> on this continent a new nation, <P> conceived in Liberty, and dedicated to the proposition <P> that all men are created equal. Would be displayed in a browser as: Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

  16. Line Breaks<BR> • Has no ending tag. • Used to add a line break without adding any new space between lines of text. • <P> inserts a blank line • <BR> no blank line

  17. Example Using <BR> Four score and seven years ago <BR> our fathers brought forth <BR> on this continent a new nation, <BR> conceived in Liberty, and dedicated to the proposition <BR> that all men are created equal. Would be displayed in a browser as: Four score and seven years agoour fathers brought forth on this continent a new nation,conceived in Liberty, and dedicated to the proposition that all men are created equal.

  18. <P> Example Four score and seven years ago <P> our fathers brought forth <P> on this continent a new nation, <P> conceived in Liberty, and dedicated to the proposition <P> that all men are created equal. Would be displayed in a browser as: Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. <BR> Example Four score and seven years ago <BR> our fathers brought forth <BR> on this continent a new nation, <BR> conceived in Liberty, and dedicated to the proposition <BR> that all men are created equal. Would be displayed in a browser as: Four score and seven years agoour fathers brought forth on this continent a new nation,conceived in Liberty, and dedicated to the proposition that all men are created equal. <P> the difference <BR>

  19. Horizontal Rules<HR> • Can visually break a page into sections. • Use sparingly. ______________________________________

  20. HTML – Style Tags • <B></B> specifies that the enclosed text should be displayed in boldface. • <I></I> specifies that the enclosed text should be displayed in italics. • <U></U> specifies that the enclosed text should be underlined. • These style tags can be combined: <B> <I>TAG</I> </B> = TAG

  21. Heading Tags<H></H> • Emphasizes major topics • Adds hierarchy to topics • Ability to create up to six levels of headings, from high - <H1>TAG</H1> = TAG to low - <H6>TAG</H6> = TAG

  22. HTML – Aligning Tags • Web browsers automatically left justify text. • Tag for horizontally centering your text: <P ALIGN=“CENTER”>Text</P> <CENTER>text</CENTER> • Tag to right justify text: <P ALIGN=“RIGHT”>Text</P>

  23. Lists • Unordered Lists – bulleted lists • Lists that do not require any specific order <UL></UL> • Each item in the list has to be identified with a list item tag: <LI></LI> • Example: <P>Spring Classes are as follows:</P> <UL> <LI>Keyboarding</LI> <LI>E-Commerce/Web Design</LI> <LI>Information Management</LI> </UL>

  24. Ordered Lists • Ordered Lists – numbered lists • Lists that do require a specific order. <OL></OL> • Numbers are automatically inserted. • Each item in the list has to be identified with a list item tag: <LI></LI> • Example: <P>Spring Classes are as follows:</P> <OL> <LI>Keyboarding</LI> <LI>E-Commerce/Web Design</LI> <LI>Information Management</LI> </OL>

  25. Background Color Tag • BGCOLOR=###### • Add to the <BODY> tag <BODY BGCOLOR=0000FF> • Color is changed by changing the hex code (0000FF) • <BODY BGCOLOR=RED>

  26. Font Color Tag • FONT SIZE • <FONT SIZE=“3”></FONT> • Size Range: 1-7 • Default is 3 • <FONT COLOR=FFFFFF></FONT> • RGB OR HEX NUMBERS FOR COLORS • Use the same hex numbers for color (FFFFFF is white) • Or <FONT COLOR=“red”></FONT> • <FONT FACE=“ARIAL”> </FONT>

  27. Hyperlink <A HREF=http://www.yahoo.com>visit Yahoo!</A> visit Yahoo

  28. Hyperlink Color • Included in the <BODY> Tag • LINK Color – the color of the hyperlink of your web page. LINK=RED • VLINK Color (Visited hyperlink)- the color of the hyperlink once the Web site has been visited VLINK=BLUE • ALINK Color (Active hyperlink)- the color of the hyperlink once the Web site has been visited EXAMPLE: <BODY BGCOLOR = FFFFFF LINK=RED VLINK=BLUE>

  29. IMAGE TAG • <IMG SRC=“image.gif”> • <BODY BACKGROUND=“IMAGE.GIF”> • Gif images (Graphic Interchange Format) • Clip Art • Regular Graphics • Jpeg images (Joint Photographic Experts Group) • Photos

  30. Image as a Hyperlink • <A HREF=“URL”><IMG SRC=“IMAGE.GIF> </A> • Example: • <A HREF=HTTP://WWW.EXCITE.COM><IMG SRC=“charlie.jpg”></A> • SIZE • <IMG SRC=“IMAGE.GIF HEIGHT=“30” WIDTH=“475”> • Measures in pixels

More Related