Presentation is loading. Please wait.

Presentation is loading. Please wait.

What is HTML? Hypertext Markup Language – special code used to format text for display on the Internet Today’s Goals 1) Introduction to HTML 2) Learn about.

Similar presentations


Presentation on theme: "What is HTML? Hypertext Markup Language – special code used to format text for display on the Internet Today’s Goals 1) Introduction to HTML 2) Learn about."— Presentation transcript:

1 What is HTML? Hypertext Markup Language – special code used to format text for display on the Internet Today’s Goals 1) Introduction to HTML 2) Learn about tags 3) Make an “About Me” page in HTML

2 A SIMPLE Web site:

3 Behind the scenes: This is the title. All about Lindsay Cesari My Family This part is a paragraph about my family. My Hobbies This part is a paragraph about my family. My Job This part is about my job

4 Common Tags

5 Your Goal: A website that looks like the one below

6 Behind the scenes: Lindsay Cesari All about Lindsay Cesari My Family I got married in August of 2008, so it's... /p> My Hobbies I have lots of hobbies. I'm a librarian… My Job I am a school library media specialist at Durgee Junior High School…!

7 What Stuck? What is HTML? My hobbies. I love books.

8 What’s New?

9 = unordered list = item in the list = bold = italics = ordered list = item in the list

10 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

11 Welcome to Thursday! Today’s Goals: Review Horizontal Lines and Links Add to about me page CSS (Cascading Style Sheets)

12 What’s New?

13

14 Nested list: 1 Husband He likes cars He likes video games

15 tag is used = does nothing by itself need to add an href tag with a destination (a Web site) Between the tags, you need to write what you want displayed for your CONTENT Visit Google!

16 Send me an ! Instead of a URL, you use the word mailto: followed by your address

17 Your Turn! Update your About Me page to include: –A horizontal rule –A nested list –An Internet link (or three or four) –A link

18 What Stuck? What’s the tag for an ordered list? Difference between: and

19 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

20 CSS Does All This:

21 Working with Color Visit: Color Scheme Designer and/or Visit: Codes for Web Colors Then write down the #s for 3 different colorsColor Scheme DesignerCodes for Web Colors

22 New Tags Lindsay Cesari All style formatting takes place in the heading section of your html coding

23 Defining the Style You can define a different style for each element (between the and tags). So your and 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

24 CSS Does All This:

25 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

26 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

27 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.

28 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: and Your style formatting goes BETWEEN the style tags.

29 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 or 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

30 What Stuck? What is HTML? My hobbies. I love books.


Download ppt "What is HTML? Hypertext Markup Language – special code used to format text for display on the Internet Today’s Goals 1) Introduction to HTML 2) Learn about."

Similar presentations


Ads by Google