what is html? hypertext markup language – special code used to format text for display on the...
TRANSCRIPT
What is HTML?Hypertext Markup Language – special
code used to format text for display on the Internet
Today’s Goals1) Introduction to HTML
2) Learn about tags
3) Make an “About Me” page in HTML
A SIMPLE Web site:
Behind the scenes:<html>
<head><title> This is the title. </title></head>
<body>
<h1> All about Lindsay Cesari </h1>
<h2> My Family </h2><p> This part is a paragraph about my family. </p>
<h2> My Hobbies </h2><p> This part is a paragraph about my family. </p>
<h2> My Job </h2><p> This part is about my job. </p>
</body></html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html> </html> <head> </head><title> </title><body> </body><h1> </h1><p> </p><h2> </h2>
Common Tags
Your Goal: A website that looks like the one below
Behind the scenes:<html>
<head>
<title> Lindsay Cesari </title>
</head>
<body>
<h1> All about Lindsay Cesari <h1>
<h2> My Family </h2>
<p> I got married in August of 2008, so it's . . . /p>
<h2> My Hobbies </h2>
<p> I have lots of hobbies. I'm a librarian…</p>
<h2> My Job </h2>
<p> I am a school library media specialist at Durgee Junior High School…!</p>
</body>
</html>
What Stuck?
<p>What is HTML? </p>
<h2> My hobbies.
<p>I love books.</p>
What’s New?
<ul> </ul> = unordered list
<li> </il> = item in the list
<strong> </strong> = bold
<em> </em> = italics
<ol> </ol> = ordered list
<li> </il> = item in the list
Your Goals:
1) Add an unordered list
2) Make a word bold
3) Make a word italics
4) Add an ordered list
REMEMBER: Add content BEFORE you add tags
Welcome to Thursday!
Today’s Goals:• Review• Horizontal Lines
and Links• Add to about me page• CSS (Cascading
Style Sheets)
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
What’s New?
<hr> </hr>
Nested list:
<ul>
<li> 1 Husband
<ul>
<li> He likes cars </li>
<li> He likes video games </li>
</ul>
</li>
•<a> </a> tag is used = does nothing by itself
• need to add an href tag with a destination (a Web site)
• <a href=“http://www.google.com”> </a>
•Between the tags, you need to write what you want displayed for your CONTENT
•<a href=“http://www.google.com”> Visit Google! </a>
<a href="mailto:[email protected]”>Send me an e-mail!</a>
Instead of a URL, you use the word mailto:
followed by your e-mail address
Your Turn!
• Update your About Me page to include:– A horizontal rule– A nested list– An Internet link (or three or four)– A e-mail link
What Stuck?
<li>What’s the tag for an ordered list?
Difference between:
<em> and <strong>
CSS: Cascading Style Sheets
CSS lets you control the look of a page. It doesn’t interfere with content, but allows you to quickly and easily change things like color, font, text size, etc.
CSS Zen Garden
CSS Does All This:
Working with Color
Visit: Color Scheme Designerand/or
Visit: Codes for Web Colors
Then write down the #s for 3 different colors
New Tags
<head>
<title> Lindsay Cesari </title>
<style type=“text/css”>
</style>
</head>
All style formatting takes place in the heading section of your html coding
Defining the Style
You can define a different style for each element (between the <style> and </style> tags). So
your <body> and <h1> areas will look different.
body {font-size: 1em;font-weight: normal;font-family: comic sans, Sans-serif;color: #000000;text-align: left;}
h1{font-size:1.4em;font-weight:bold;font-family:comic sans, sans-serif;color:#0000ff;text-align:center}
Style definition for the body
Style definition for h1
CSS Does All This:
Style Components: Vocab
body {font-size: 1em;font-weight: normal;font-family: comic sans, Sans-serif;color: #000000;text-align: left;}
Selector: The HTML element that you’re formatting. Could also be the h1, h2, a, hr, p, ul, ol and li elements
Property: An element of formatting. Ex: font size, font style, color, etc.
Value: The specific format you want.Ex: 1 is the value of the font size, and
Comic Sans is the value of the font family
So how do I know what properties and values are
available?
body {font-size: 1em;font-weight: normal;font-family: comic sans, Sans-serif;color: #000000;text-align: left;}
You visit: CSS Properties
How do I figure out colors?Visit: The Webmaster’s Color Lab
Write down the 6 digit color code, and use that as your value.
Your Goals:
• Add a style sheet to your About Me page– Add properties and values for at least 3
selectors on your page
• Remember you need these new tags in the heading: <style type=“text/css”> and </style>
• Your style formatting goes BETWEEN the style tags.
REVIEW: What Stuck?
body {font-size: 1em;font-weight: normal;font-family: comic sans, Sans-serif;color: #000000;text-align: left;}
Selector: The HTML element that you’re formatting. Could also be
the <h1> or <h2> element
Property: An element of formatting. Ex: font size, font style, color, etc.
Value: The specific format you want.Ex: 1 is the value of the font size, and
Comic Sans is the value of the font family
What Stuck?
<p>What is HTML? </p>
<h2> My hobbies.
<p>I love books.</p>