Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML. HTML TAGS Every tag must have an opening bracket Every tag must have an opening bracket The basic construction of an Beginning HTML TAG is this:

Similar presentations


Presentation on theme: "HTML. HTML TAGS Every tag must have an opening bracket Every tag must have an opening bracket The basic construction of an Beginning HTML TAG is this:"— Presentation transcript:

1 HTML

2 HTML TAGS Every tag must have an opening bracket Every tag must have an opening bracket The basic construction of an Beginning HTML TAG is this: The basic construction of an Beginning HTML TAG is this: Ending tags begin with a forward slash. That's what makes them ending tags - Ending tags begin with a forward slash. That's what makes them ending tags -

3 Structure of an HTML Document MY WEBPAGE MY WEBPAGE This is my first web page... This is my first web page...

4 HTML DOCUMENTS An HTML Document is nothing more than a text document which has been given an.html extension on the end of the file name. An HTML Document is nothing more than a text document which has been given an.html extension on the end of the file name. My Web Page This page is about me. I was born...

5 HTML TAGS What gives a web page its sizzle are the HTML TAGS which are sprinkled throughout the document. What gives a web page its sizzle are the HTML TAGS which are sprinkled throughout the document. An HTML TAG looks like this: An HTML TAG looks like this:

6 HTML TAGS Most HTML TAGS come in pairs, and effect any text placed between the opening and closing tag. This will be red but this won't. Most HTML TAGS come in pairs, and effect any text placed between the opening and closing tag. This will be red but this won't. This will be red but this won't. This will be red but this won't.

7 THE HEAD SECTION The entire area between the opening and closing HEAD tags is considered the HEAD SECTION of an HTML document. The entire area between the opening and closing HEAD tags is considered the HEAD SECTION of an HTML document. There's a funny thing about the HEAD SECTION – nothing you put here will actually be visible on your web page. There's a funny thing about the HEAD SECTION – nothing you put here will actually be visible on your web page. The HEAD SECTION generally contains the TITLE of the web page, META TAGS, sometime a STYLE SHEET and occasionally some javascript code. The HEAD SECTION generally contains the TITLE of the web page, META TAGS, sometime a STYLE SHEET and occasionally some javascript code.

8 THE TITLE TAG Welcome to Ponder Independent School District Welcome to Ponder Independent School District The text you place between the TITLE tags shows up in the Color Bar at the top of your screen. The text you place between the TITLE tags shows up in the Color Bar at the top of your screen.

9 THE TITLE TAG Title

10 THE BODY SECTION This is the area between the two BODY tags, and will contain all of your text, images, graphics, sounds – and even a link to Uncle Otto's homepage if you like. This is the area between the two BODY tags, and will contain all of your text, images, graphics, sounds – and even a link to Uncle Otto's homepage if you like. The entire page must be encompassed by a pair of HTML tags. The entire page must be encompassed by a pair of HTML tags.

11 A HEADING TAG A Heading Tag looks like this: My Web Page A Heading Tag looks like this: My Web Page

12 HEADING TAGS HEADING tags come in six unique sizes, ranging from thru with 6 being the smallest: HEADING tags come in six unique sizes, ranging from thru with 6 being the smallest: HTML LESSON HTML LESSON

13 HEADING TAG ATTRIBUTES The HEADING tag has 1 possible attribute. This is the ALIGN attribute. The HEADING tag has 1 possible attribute. This is the ALIGN attribute. If you want your HEADING to show up in the middle of the page, you would do this: If you want your HEADING to show up in the middle of the page, you would do this: Lesson 2 Lesson 2 If you want your HEADING to show up on the right side of the page, you would do this: If you want your HEADING to show up on the right side of the page, you would do this: Lesson 2 Lesson 2

14 THE BODY TAG It controls the color of your background, text, link, and other elements. It also allows you to place an image as a background on your page. It controls the color of your background, text, link, and other elements. It also allows you to place an image as a background on your page. The body tag follows the tag. The body tag follows the tag.

15 PARAGRAPH TAGS To set apart a block of text as a PARAGRAPH, you should place it between a pair of PARAGRAPH tags. To set apart a block of text as a PARAGRAPH, you should place it between a pair of PARAGRAPH tags. PARAGRAPH tags look like this: PARAGRAPH tags look like this: Any text placed between the opening and closing PARAGRAPH tags will be set apart as a paragraph, with a blank line above it and a blank line below it. Any text placed between the opening and closing PARAGRAPH tags will be set apart as a paragraph, with a blank line above it and a blank line below it.

16 PARAGRAPH CENTER TAG My text becomes a centered paragraph My text becomes a centered paragraph My text becomes a centered paragraph

17 BREAK TAG
Notice that the BREAK tag does not have a closing tag. Notice that the BREAK tag does not have a closing tag. Place this tag wherever you want a line break. The text which immediately follows will jump down to the next line. Place this tag wherever you want a line break. The text which immediately follows will jump down to the next line.

18 BOLD TAG To make your text appear heavier, use the BOLD tag: To make your text appear heavier, use the BOLD tag: This is bold but this is not This is bold but this is not This is bold but this is not

19 EMPHASIS TAG To add some emphasis (Italics) to a text, Simply enclose it in EMPHASIS tags: To add some emphasis (Italics) to a text, Simply enclose it in EMPHASIS tags: This is emphasized but this is not This is emphasized but this is not This is emphasized but this is not

20 FONT TAG The FONT tag will alter 3 different features of the text placed between the opening and closing tags. These are the: The FONT tag will alter 3 different features of the text placed between the opening and closing tags. These are the: Font Size Font Size Font Color Font Color Font Face Font Face

21 FONT SIZE In order for the FONT tags to control the size of text placed between them, you must use a SIZE attribute in the FONT tag itself. In order for the FONT tags to control the size of text placed between them, you must use a SIZE attribute in the FONT tag itself. Do so like this: Do so like this: Text to be effected here Text to be effected here

22 FONT TAG font size 1 font size 1 font size 2 font size 2 font size 3 font size 3 font size 4 font size 4 font size 5 font size 5 font size 6 font size 6 font size 7 font size 7

23 FONT COLOR Specifying font color is the same as specifying font size. The only difference is that you will use a COLOR attribute in your FONT tag: Specifying font color is the same as specifying font size. The only difference is that you will use a COLOR attribute in your FONT tag: Text to be effected here Text to be effected here You can use the proper name for most of the basic colors in your COLOR attribute. Red, Blue, Green, Yellow, Black, etc. are all okay. But, if you want to use a funky color, like chilipepper magenta, you can't use the proper name, you'll have to use a HEXADECIMAL COLOR CODE. You can use the proper name for most of the basic colors in your COLOR attribute. Red, Blue, Green, Yellow, Black, etc. are all okay. But, if you want to use a funky color, like chilipepper magenta, you can't use the proper name, you'll have to use a HEXADECIMAL COLOR CODE.

24 HEXADECIMAL COLOR CODE Hexadecimal Color Codes are 6 digit codes which are used to express the amount of red, blue and green in any given color. Hexadecimal Color Codes are 6 digit codes which are used to express the amount of red, blue and green in any given color. Here are the Hex Codes for some of the more common colors: Here are the Hex Codes for some of the more common colors: #000000BLACK #000000BLACK #FFFFFFWHITE #FFFFFFWHITE #FF0000RED #FF0000RED #00FF00GREEN #00FF00GREEN #0000FFBLUE #0000FFBLUE

25 MARQUEE TAG A Marquee is scrolling text across a page. It is eye-catching, but not supported by all browsers. (Works in MSIE – not Netscape) A Marquee is scrolling text across a page. It is eye-catching, but not supported by all browsers. (Works in MSIE – not Netscape) This is the code for Marquee. This is the code for Marquee. This is the code for Marquee.

26 MARQUEE TAG To vary the background color of the marquee To vary the background color of the marquee Add BGCOLOR="color name or code" to the MARQUEE tag Your scrolling text goes here Add BGCOLOR="color name or code" to the MARQUEE tag Your scrolling text goes here This is the code for Marquee.

27 HYPERLINKS One of the most dramatic differences between HTML and any other information medium is the ability to place a link to another document. One of the most dramatic differences between HTML and any other information medium is the ability to place a link to another document. Hyperlinks are built using an opening and closing ANCHOR tag. Everything placed between these tags becomes a HYPERLINK. Hyperlinks are built using an opening and closing ANCHOR tag. Everything placed between these tags becomes a HYPERLINK.

28 ANCHOR TAGS The anchor tag has an attribute called HREF. The anchor tag has an attribute called HREF. The HTML for a hyperlink looks like this: The HTML for a hyperlink looks like this: To find a web host Click Here To find a web host Click Here To find a web host Click HereClick HereClick Here

29 IMAGE TAGS For an IMAGE to show up on your page, you need to place an HTML tag which will, basically, tell the browser to go to a location, grab the image, and display it on the webpage. For an IMAGE to show up on your page, you need to place an HTML tag which will, basically, tell the browser to go to a location, grab the image, and display it on the webpage. Note, the IMG tag does not have a closing tag. Note, the IMG tag does not have a closing tag. In order for the tag to work, you must use the URL of a GIF or JPG. In order for the tag to work, you must use the URL of a GIF or JPG.

30 POSITIONING IMAGES You can position the image horizontally by using the ALIGN attribute. You can position the image horizontally by using the ALIGN attribute. Without an align attribute, the image will always default to the left. Without an align attribute, the image will always default to the left.

31 POSITIONING IMAGES So, if you just put this: So, if you just put this: You'll get this: The first line of text, following the IMAGE tag, begins even with the bottom, then continues on like normal.

32 USING IMAGES AS LINKS If you'd like your hot spot to be an image rather than text, do this instead: If you'd like your hot spot to be an image rather than text, do this instead:

33 USING IMAGES AS LINKS That will give you this: To get rid of the border, place a BORDER=0 attribute in your IMAGE tag. BORDER=0 BORDER=0

34 CENTERING IMAGES To center an Image, we must nest it between a pair of DIVISION tags which contain the ALIGN attribute. To center an Image, we must nest it between a pair of DIVISION tags which contain the ALIGN attribute.


35 Images for Background To use an image as a background for your page, you’ll place a BACKGROUND attribute in the body tag. To use an image as a background for your page, you’ll place a BACKGROUND attribute in the body tag.

36 HORIZONTAL LINES Horizontal Ruled Lines are used to separate different areas of a web page. Horizontal Ruled Lines are used to separate different areas of a web page. The tag for a horizontal ruled line is. The tag for a horizontal ruled line is. The horizontal ruled line DOES NOT have a closing tag. The horizontal ruled line DOES NOT have a closing tag.

37 HORIZONTAL LINE EXAMPLES You may also use several attributes within one tag... You may also use several attributes within one tag...

38 LISTS – Ordered (Numbered) ORDERED LIST ORDERED LIST 1. pencils 2. pens 3. erasers 4. paper 5. glue HTML CODE pencils pens erasers paper glue

39 LISTS – Unordered (Bullets) UNORDERED LIST UNORDERED LIST pencils pencils pens pens erasers erasers paper paper glue glue HTML CODE pencils pens erasers paper glue

40 If your HTML Code Is  apples bananas grapefruit oranges peaches grapes apples apples bananas bananas grapefruit grapefruit 1. oranges 2. peaches 3. grapes What will appear in the browser?


Download ppt "HTML. HTML TAGS Every tag must have an opening bracket Every tag must have an opening bracket The basic construction of an Beginning HTML TAG is this:"

Similar presentations


Ads by Google