1 / 17

Charles' keys to HTML

Tags Blocks Style. Charles' keys to HTML. Tags. Opening tags: <TAGNAME attributename='value'> Closing tags: </TAGNAME>. Blocks. Blocks are made up of an opening and closing tag and everything in between: <HTML> <B>Hello there</B> </HTML>. Nesting Blocks. Bad:

johnsonv
Download Presentation

Charles' keys to 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. Tags Blocks Style Charles' keys to HTML

  2. Tags Opening tags: <TAGNAME attributename='value'> Closing tags: </TAGNAME>

  3. Blocks Blocks are made up of an opening and closing tag and everything in between: <HTML> <B>Hello there</B> </HTML>

  4. Nesting Blocks Bad: <B><I>Hello there</B></I> Good: <B><I>Hello there</I></B>

  5. Style Indentation – Inside a block indent <HTML> <B>Hi there</B> </HTML> Consistent case – Tag Names, Attribute Names <BODY bgcolor='red'>

  6. More Style Always Always Always quote attribute values good: <BODY bgcolor='red' vlink='green'> bad: <BODY bgcolor=red vlink=green>

  7. The three basic tags and blocks <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>

  8. The three basic tags and blocks cont. • Html • This is the outside block in which we will create our webpage, for our purposes there should never be anything outside it. • Head • This is the block in which we place information about the page, such as the title. In fact we won't really use it for anything else until after the first project.

  9. The three basic tags and blocks cont. • Body • This is where we place all the content that is going to be seen by the user. The rule of thumb is, if it is going to be seen by the user it will go here.

  10. Adding Information to our page <HEAD> <TITLE>Some cool catchy title</TITLE> </HEAD> <BODY> Tiberius Claudius Nero Born: November 16, 42 BC Died: March 16, 37 AD </BODY>

  11. How can we make the text look right? • Since all whitespace (spaces, returns) gets compressed to a single space we need to use a tag to get line breaks: <BR> <BODY> Tiberius Claudius Nero<BR><BR> Born: November 16, 42 BC<BR> Died: March 16, 37 AD<BR> </BODY>

  12. Writing for the web (sort of) • Headings draw the eye in. They can also be used to draw the eye in. • <H1>, <H2>, <H3>, <H4>, <H5>, <H6> <H1>Tiberius Claudius Nero</H1><BR><BR>

  13. A better way to control the font • The <FONT> tag uses following attributes: • Size: can be relative (+2, -2 ,etc..) or absolute (1-5) • Color: for now you can make this red, blue, etc... <FONT size='+2' color='red'>Born: November 16, 42 BC</FONT><BR>

  14. But changing the actual Font? • In that case use the face attribute <FONT face='arial'> Died: March 16, 37 AD </FONT><BR>

  15. Bold and Italics • <B>, <I> <FONT face='arial'> <B>Died: March 16, 37 <I>AD</I></B> </FONT><BR>

  16. Background Color • The bgcolor of the <BODY> tag <BODY bgcolor='yellow'>

  17. Reference Website • http://www.w3schools.com

More Related