Today’s Goals What is HTML? Introduction to HTML Learn about tags Make an “About Me” page in HTML What is HTML? Go over goals Have students write down definition for HTML on worksheet Hypertext Markup Language – special code used to format text for display on the Internet
A SIMPLE Web site: This is what a super simple website looks like when displayed in I.E. Tell students they’ll be making a similar web site
Behind the scenes: <html> <head> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <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> <h2> My Job </h2> <p> This part is about my job. </p> </body> </html> HTML behind the website 2 portions of a web site -- content and the code Show students how to highlight the content, first, on the SmartBoard Have students highlight the content on their worksheet * Ask: What can you tell me about HTML? Let’s look at lines 3 and line 6. Can you identify any patterns? (start tag, end tag) Everything in a <> is called a tag. There is always a beginning tag and an end tag. Inside each tag is a command telling the website to display the text a certain way. On Worksheet, have students define: Tag = directions telling the computer to display the text in a certain way. When the computer sees the beginning tag, it starts displaying the text in that format, when it sees the end tag, it knows to stop displaying the text in that format. Must have a beginning AND an end tag, or computer won’t “get it” ASK: How does the computer tell the difference between a start tag and an end tag? (uses /) Have students highlight tags/code in pink
Common Tags <html> </html> <head> </head> <title> </title> <body> </body> <h1> </h1> <p> </p> <h2> </h2> Look at tags and decide what each tag does, recording on worksheet: o <html> - notifies computer that the following is in html code o <head> - holds all the stuff you’d put in a heading – doesn’t show up on the actual page o <title> - title of the website – displayed at the top of the browser window o <body> - holds all the text that is displayed on a web page o <h1> - biggest heading o <h2> - smaller heading o <p> - starts a new paragraph (skips a line)
Your Goal: A website that looks like the one below Now student knows enough to create a website like the one displayed on the slide Ask them to open Notepad They need to write the CONTENT first A title for the site A section on their families Hobbies Their choice Each section must have at least 3 sentences in it
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> Now ask students to add the tags to their documents Explain they can have as many spaces and blanks lines as they want -- html will ignore them Remind them to use my example -- it shows the exact tags they need to use
What Stuck? </p> <p> <h2> My hobbies. What is HTML? <h2> My hobbies. <p>I love books.</p> Have students answer questions for candy . . . What is HTML? What is <p> tell the browser? And what does </p> tell the browser? What’s missing from these 2 lines of code? Take a 5 minute break
What’s New? Show students new version of site Ask them to identify the new things: * Ordered list * Bold words * Italic words * Unordered list
<strong> </strong> = bold <ul> </ul> = unordered list <li> </il> = item in the list <em> </em> = italics Review each section of code to explain what it does: Unordered list: * Start the list with <ul> tag * every item in the list gets an <li> -- list item, tag * end with an </ul> tag Strong or bold: <strong> </strong> Italics/emphasis: <em> </em> Ordered List: <ol> for start of list <li> for ever item in the list <ol> </ol> = ordered list <li> </il> = item in the list
Your Goals: Add an unordered list Make a word bold Make a word italics Add an ordered list REMEMBER: Add content BEFORE you add tags * Students have my example for code They need to add all those elements first, and then add the code
Welcome to Thursday! Today’s Goals: Review Horizontal Lines and Links Add to about me page CSS (Cascading Style Sheets)
What’s New? HIGHLIGHT each section of code as we discuss it on the worksheet; make a note about what that section of code does
<hr> </hr> You just type <hr> </hr> with nothing in between
Nested list: <ul> <li> 1 Husband <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:lcesari@bville.org”>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> Difference between: What’s the tag for an ordered list? <li> Difference between: <em> and <strong> Tag for ordered list = <ol> <li> = item in the list <em> = italics <strong> = bold
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 Designer and/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> Circle new tags on worksheet All style formatting takes place in the heading section of your html coding
Style definition for the body 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 Selector: The HTML element that you’re formatting. Could also be the h1, h2, a, hr, p, ul, ol and li elements body { font-size: 1em; font-weight: normal; font-family: comic sans, Sans-serif; color: #000000; text-align: left; } 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 Highlight each thing as we discuss in a different color on worksheet ex : selectors in blue, properties in pink, and values in green Write down definition for each vocab word DISCUSS PUNCUATION!!!! Property: An element of formatting. Ex: font size, font style, color, etc.
So how do I know what properties and values are available? You visit: CSS Properties body { font-size: 1em; font-weight: normal; font-family: comic sans, Sans-serif; color: #000000; text-align: left; }
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; Selector: The HTML element that you’re formatting. Could also be the <h1> or <h2> element body { font-size: 1em; font-weight: normal; font-family: comic sans, Sans-serif; color: #000000; text-align: left; } 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 Property: An element of formatting. Ex: font size, font style, color, etc.
What Stuck? </p> <p> <h2> My hobbies. What is HTML? <h2> My hobbies. <p>I love books.</p>