Basic HTML Tags Ryan Frazier April 30,2004 CSC113

What is HTML? HyperText Markup Language The language used for web pages Based on tags Tags have a start tag and and end tag The end tag looks like the start tag but has a / in it. Example: <TAG> </TAG>

Basic Formatting Bold uses the <B> tag: Example in HTML: The following is <B>bold</B> Example how it would look: The following is bold

Basic Formatting Continued Italic uses the <I> tag: Example in HTML: The following is <I>italic</I> Example how it would look: The following is italic

Basic Formatting Continued Underline uses the <U> tag: Example in HTML: The following is <U>underlined</U> Example how it would look: The following is underlined

Combining Tags Tags can be nested together to have more than one style The tags are nested like this to have something bold and italic: Example in HTML: This is <B><I>bold and italic</I></B> Example how it would look: This is bold and italic

Special Tags There are special tags like: <title> adds a title to the page that shows up in the browser’s window but not on the page itself Example: <title>This is the title of my page</title> This would show up in the top bar of the browser window

Heading Tags There are special tags that have different font sizes to be different headers, like for different sections of the document. The tags are <H1>, <H2>, …<H6> The lower the number, the bigger the heading.

Heading Tags Example Example in HTML: Example how it would look: <H1>This is heading 1</H1> <H2>This is heading 2</H2> <H3>This is heading 3</H3> Example how it would look: This is heading 1 This is heading 2 This is heading 3

HTML Colors Colors can be set by hexadecimal numbers for the amount of red, green, and blue in the color. The color is shown by #xxyyzz where xx is the red part, yy is the green part, and zz is the blue part.

HTML Colors Continued Each of the different color’s numbers is 2 digits, going from 00 to FF. 00 means none of the color FF means all of the color #000000 means no red, green, or blue, which means black #FFFFFF means all red, all green, and all blue, which means white.

HTML Colors Continued Different mixes of the red, green and blue make the different colors. #FF0000 means all red, no green, and no blue, which means bright red. The colors can be mixed, like #FF00FF means all red, no green, and all blue, which makes bright red + bright blue= bright purple.

HTML Colors Continued If the number is less than FF, then it is less of that color. #110000 means a little red, no green, and no blue – this is a very dark red.

Using Colors in Text The <font> tag is used to change the color of the text. Example in HTML: This is <font color=“#FF0000”>bright red</font> Example how it would look: This is bright red

From http://www.pageresource.com/html/hexcodes.htm HTML Color Samples Color Name HEX Code Color black #000000   white #FFFFFF red #FF0000 blue #0000FF green #008000 yellow #FFFF00 orange #FFA500 violet #EE82EE purple #800080 pink #FFC0CB silver #C0C0C0 gold #FFD700 gray #808080 aqua #00FFFF skyblue #87CEEB lightblue #ADD8E6 fuchsia #FF00FF khaki #F0E68C From http://www.pageresource.com/html/hexcodes.htm

Linking to other pages HTML can make links that you can click on to go to other pages from the page you are looking at. The link uses an anchor tag <A> The link includes the URL that you will go to if you click the link.

Link Example Example of a link in HTML: Example how it would look: Click <A HREF=“http://www.yahoo.com”>here</A> to go to the Yahoo site. Example how it would look: Click here to go to the Yahoo site. The underlined blue text above is the way the link would look. If you click on that it would go to Yahoo.

Resources The information for this presentation came from the following web site and the linked pages: http://www.pageresource.com/html/hclist.htm