160 likes | 262 Views
Basic HTML UCR Webmasters Support Group Derk Adams. Hyper-Text Markup Language. Markup vs. Programming. Tags < > Tag Case. White Space. What is HTML. First Page. index.html default.htm Welcome.html Choosing Names. Case Sensitivity. Getting Started. Document Tags.
E N D
Basic HTML UCR Webmasters Support Group Derk Adams
Hyper-Text Markup Language. Markup vs. Programming. Tags < > Tag Case. White Space. What is HTML
First Page. index.html default.htm Welcome.html Choosing Names. Case Sensitivity. Getting Started
Document Tags • HTML <html> </html> • Header <head> </head> • Body <body> </body> • <html> • <head> • </head> • <body> • </body> • </html>
Header • Title <title> </title> • Metatags. • JavaScript. • CSS. <html> <head> <title>My Page</title> </head> <body> </body> </html>
Common names: red, blue, green. Hexadecimal: ff0000, 0000ff, 00ff00. Hex counting: 0-16 -> 0-f. Color Structure: rrggbb 000000 Color
Body • Background Color: bgcolor=“” • Text Color: text=“” • Link Color: link=“” • Visited Link Color: vlink=“” <html> <head> <title>My Page</title> </head> <body bgcolor=“000000” text=“ffffff”> This is my first Page. </body> </html>
References • Absolute Reference • http://www.ucr.edu/alpha.html • Relative Reference • alpha.html
Spacing • Line Break <br> • Paragraph <p></p> • Horizontal Rule <hr> <html> <head> <title>My Page</title> </head> <body bgcolor=“000000” text=“ffffff”> <p>This is my first Page.</p> </body> </html>
Text Formatting • Bold <b> </b> • Italics <i> </i> • Center <center> </center> <html> <head> <title>My Page</title> </head> <body bgcolor=“000000” text=“ffffff”> <p><b>This is my first Page.</b></p> </body> </html>
Structure <h1></h1> to <h6></h6> <html> <head> <title>My Page</title> </head> <body bgcolor=“000000” text=“ffffff”> <h1>My First Page</h1> <p><b>This is my first Page.</b></p> </body> </html>
Links <a href=“”>Link Text</a> <html> <head> <title>My Page</title> </head> <body bgcolor=“000000” text=“ffffff”> <h1>My First Page</h1> <p><b>This is my first Page.</b></p> <a href=“http://www.ucr.edu/alpha.html”>My first link<a> </body> </html>
Images <img src=“” width=“” height=“” alt=“”> <html> <head> <title>My Page</title> </head> <body bgcolor=“000000” text=“ffffff”> <h1>My First Page</h1> <p><b>This is my first Page.</b></p> <a href=“http://www.ucr.edu/alpha.html”>My first link<a><br> <img src=“http://www.ucr.edu/images/design4/title.gif” width=“464” height=“98” alt=“University of California, Riverside”> </body> </html>
Bullets • Unordered List (bullets): <ul></ul> • Ordered List (numbers/letters): <ol></ol> • Line Items: <li></li> • Definition List: <dl></dl> • Definition Term: <dt></dt> • Definition Items: <dd></dd>
Bullets <ol> <li>Item 1</li> <li> Item 2</li> </ol> <ul> <li>Item 1</li> <li> Item 2</li> </ul> <dl> <dt>Item 1</dt> <dd> Item 2</dd> </dl>