Embed Size (px)
Citation preview
HTML Basics•What is HTML?•Basic Tags•Fonts•Colors•Pictures•Links•Lists•Tables•Frames•Good Sites
What is HTML?What is HTML?HTML is a HTML is a programming programming language that language that allows you to tell allows you to tell the browser what the browser what you want it to you want it to display and how display and how you want it to be you want it to be displayed, in simple displayed, in simple terms, it is a terms, it is a WebPage. In WebPage. In HTML there are HTML there are certain markers, certain markers, like commands, like commands,
that tell the that tell the Browser what to Browser what to do, these are do, these are called tags. By called tags. By using tags you can using tags you can have tables, fonts, have tables, fonts, colors, pictures, colors, pictures, links, and almost links, and almost anything you can anything you can think up, and think up, and experimentation experimentation with tags can lead with tags can lead to some pretty to some pretty cool WebPages.cool WebPages.
Important Things to Important Things to Remember...Remember...
• Use Notepad, Microsoft Word adds Use Notepad, Microsoft Word adds programming unless you save it as text programming unless you save it as text only without formattingonly without formatting
• Be sure to save it as a .htm or .html file, Be sure to save it as a .htm or .html file, not a .txt file or it will not show in you not a .txt file or it will not show in you browserbrowser
• Carriage returns are not present in Carriage returns are not present in HTML, for a return, use a <br> tagHTML, for a return, use a <br> tag
• Remember use end tagsRemember use end tags• If it isn’t right, check your spelling...If it isn’t right, check your spelling...• Put things that aren’t part of the tag, but Put things that aren’t part of the tag, but
inside the tag in quotations..so <font inside the tag in quotations..so <font size=“7”> not <font size=7>size=“7”> not <font size=7>
• Make sure to encase all of your tags with Make sure to encase all of your tags with a < and the beginning and a > at the end.a < and the beginning and a > at the end.
Basic HTML TagsBasic HTML TagsStart Tag When needed What it does Ending
Tag When needed What it
does <html> At the top Tells the
browser that it is a WebPage not a text file
</html> At the end Tells the browser to end the WebPage
<head> After <html> Gives the page a title
</head> After </title> Ends the title
<title> After <head>
Shows name at the top of the browser
</title> Before </head>
Ends the title
<body> After </head>
Starts the page
</body> Before </html> and after page
Ends the body content
These are only the tags that are essential to begin a page, there are many These are only the tags that are essential to begin a page, there are many
other tags. The next slide shows where these tags belong, and how they other tags. The next slide shows where these tags belong, and how they are used.are used.
Basic Tags In PlaceBasic Tags In Place<html>
<head><title>Name of Page</title></head>
<body>
Content of Page
</body>
</html>
Name of Page
Content of Page
It looks Like:It looks Like:
Basic Font ChangesBasic Font ChangesTo enter To enter Text into Text into your page, your page, you can you can simply type simply type after the after the body tag, body tag, however, however, sometimes sometimes change is change is good. All good. All changes to changes to your font your font size, color, size, color, face and face and style, will style, will occur inside occur inside the <font> the <font> tagtag..
Tag Whats it Change?
Options End Tag
<font face=”...”> Font Depends on
Browser </font face=”...”>
<font color=”...”> Color See Color </font color=”...”>
<font size=”...”> Size 1-7
(1 smallest 7 largest)
</font size=”...”>
<i><b><u> Style
<i>=Italic <b>=Bold <u>= Underline
</i></b></u>
<H1>through<H7> Heading
(sets off from other
test)
<H1>largest<H7>smallest
</H1>through</H7>
Examples of Font ChangeExamples of Font Change
Change Tag Example
Font Face <font face= ”beanie”>
This is Beanie
Font color <font color= “blue”>
This is Blue
Font size <font size=”7”>
This is 7
Style <b> <i> <u>
This is Bold This is italic underline
Headings <H1> This is H1
ColorsColorsAdding colors to WebPages is not Adding colors to WebPages is not difficult. As a matter of fact, it is difficult. As a matter of fact, it is quite easy. In HTML you can either quite easy. In HTML you can either put in the basic names of the colors put in the basic names of the colors (like red, blue, green, etc.) or you can (like red, blue, green, etc.) or you can enter in a numerical code for color. enter in a numerical code for color. In this code (hexadecimal code) the In this code (hexadecimal code) the first two numbers are the amounts of first two numbers are the amounts of red displayed, the second two red displayed, the second two numbers are the amount of green numbers are the amount of green displayed, and the third two numbers displayed, and the third two numbers are the amount of blue displayed, are the amount of blue displayed, these colors range from 0-f. #ffffff is these colors range from 0-f. #ffffff is black and #oooooo is white, and so black and #oooooo is white, and so on, when using these numbers be sure on, when using these numbers be sure to use quotations and a number to use quotations and a number symbol like “#556600”. A table of all symbol like “#556600”. A table of all these color numbers can be viewed at these color numbers can be viewed at http://wdvl.internet.com/Graphics/Colhttp://wdvl.internet.com/Graphics/Colour/666.htmlour/666.html
Basic Color TagsBasic Color TagsWhere How Example End
Background Inside <body> put
<body bgcolor=”color”>
<body bgcolor=”black”>or <body
bgcolor=”#000000”> </body>
Inside Table Inside the <td> put <td
bgcolor=”color”> <td bgcolor=”white”>or <td bgcolor=”#ffffff”>
</td>
Table Border
Inside <table> put a <table
bordercolor=”color”>-Make sure you have
entered a table width, or this will not work.
<table border=”2” bordercolor=”black”> or
<table border=”2” bordercolor=”#000000”>
</table>
Picture Border Inside the image tag
after the picture (src) put a color=”color”>
<img src=”picture.gif” color=”black”>
<img src=”picture.jpg” color=”#000000”>
None needed
Inside Frames The same as in Body Same as in body Same as in body
PicturesPicturesTo add pictures first be sure that they To add pictures first be sure that they are in an acceptable format, these are are in an acceptable format, these are gifs and jpgs. Any other formats like gifs and jpgs. Any other formats like bmps, will not show up! If you use to bmps, will not show up! If you use to many animated gifs, you page can be many animated gifs, you page can be referred to as annoying, and you should referred to as annoying, and you should avoid this. You can add pictures to avoid this. You can add pictures to many places, but the format is always many places, but the format is always the same, except in adding it as a the same, except in adding it as a background. The format for inside the background. The format for inside the body is <img src=“location of body is <img src=“location of picture.gif”> or <img src=“location of picture.gif”> or <img src=“location of picture.jpg”>. For the background, picture.jpg”>. For the background, inside the <body put <body inside the <body put <body background=“location of picture.gif”>background=“location of picture.gif”>
Picture TagsPicture TagsWhat Where How
Width Inside <img>
tag
<img src-“location of picture.gif” width=”316”>
The 316 is in pixels, this can be used to enlarge
or shrink a picture, if no width is specified, then
the original width is used
Height Inside <img>
tag
<img src=”location of picture.jpg” hieght=”316”>
The 316 is in pixels, this can be used to enlarge
or shrink a picture, if no width is specified, then
the original width is used
Border Inside the <img> tag
<img src=”location of picture.gif” border=”3”>
The Border sometimes works and sometimes
does not, it depends on the browser, the “3” is
also in pixels.
Border Color
<inside the <img> tag after the
<border=”x”>
<img src=”location of picture.jpg”
bordercolor=”blue”>
The border color as with the border, sometimes
works and it sometimes does not, it is browser
dependent.
LinksLinksLinks can be added to other WebPages, or to Links can be added to other WebPages, or to other pages within your WebPage. Also you other pages within your WebPage. Also you can add links to other objects inside your can add links to other objects inside your homepage or any other page. To add a link to homepage or any other page. To add a link to another WebPage type <a href=“http://site another WebPage type <a href=“http://site name”>Name of Site</a> To add a link to a name”>Name of Site</a> To add a link to a page inside your WebPage type <a page inside your WebPage type <a href=“pagename.html”>Name of Page</a> href=“pagename.html”>Name of Page</a> To add a link withing a page type<a To add a link withing a page type<a href=“#name of place”>Name of place</a> href=“#name of place”>Name of place</a> then where you want the link to go, inside the then where you want the link to go, inside the tag put <id=“name of place”>, so if you tag put <id=“name of place”>, so if you wanted to link to a table you would put <table wanted to link to a table you would put <table id=“name of place”>. If you want to return to id=“name of place”>. If you want to return to the previous page, just put a link to the other the previous page, just put a link to the other page on the page you linked to.page on the page you linked to.
ListsListsLists can add a lot to a WebPage, Lists can add a lot to a WebPage, there are different types of lists and there are different types of lists and different types of bullets or numbers different types of bullets or numbers that can be used. You can have an that can be used. You can have an ordered list (a, b, c, etc.) unordered ordered list (a, b, c, etc.) unordered lists (with bullets) or you can have lists (with bullets) or you can have definition lists. An Ordered List looks definition lists. An Ordered List looks like like a) list itema) list item
b) list item and so onb) list item and so onAn Undordered List looks likeAn Undordered List looks like
• list itemlist item• list itemlist item
An Definition List looks like:An Definition List looks like:TermTerm
DefinitionDefinition
Ordered ListsOrdered Lists
L ow er C ase R om an N u m erals<o l type="i">
R om an N u m eralsC apital<o l type="I ">
L ow er C ase A lph abetical<o l type="a">
U pper C ase A lph abetical<o l type="A ">
N u m bered<ol type="#">
O rdered L istB u l let T ypes
Unordered ListsUnordered Lists
For D isc<u l type="d isc">
For a Square<u l type="square">
For a hol low C i rcle<u l type="ci rcle">
U norder L istsB u l let T ypes
Definition ListsDefinition Lists
Fi rst, type <d l>T ype ti tle here
T hen, to put the nam eof the w ord being defi ned
type <dt>
T o enter the defi n i ton ,type <dd>
D efi n i tion L ists
TablesTablesTables in HTML are easy to program Tables in HTML are easy to program if you know what you are trying to do. if you know what you are trying to do. Tables look like the charts present on Tables look like the charts present on many of these slides. Tables in many of these slides. Tables in browsers by default have no borders, if browsers by default have no borders, if you want to see the edges of your you want to see the edges of your table, you have to place a border table, you have to place a border command inside the table tag. You can command inside the table tag. You can also use tables to format pages. Inside also use tables to format pages. Inside tables, the text is always the default of tables, the text is always the default of the browser (black and small), if you the browser (black and small), if you want to change this font, you must add want to change this font, you must add a <font color=“color” and/or a <font color=“color” and/or size=“x”> inside each cell to make the size=“x”> inside each cell to make the changechange..
TT
aa
bb
ll
e e
TT
aa
gg
ss
Tag Where What End Where Extra <table> Before Start
of Table Begins Table </table> Don’t Forget
to End!!!
<table border=”x”>
Inside Table Tag
Gives Table a Border
None None Be sure to add a border= tag if you want to see the border! All numbers are in pixels
<table bordercolor=
”color”>
Inside Table Tag
Adds Color to the Border
None None Make sure that you put the color in “quotes” and that if you are using a numerical color code
that you be sure to include the #
<table width=”x”>
Inside Table Tag
Restricts table size
None None It is done in percents or in pixels. A percent is dependent upon the width of the page, and it will change if the person changes the size of
the browser window. <table
cellpadding=”x”>
Inside Table Tag
Adds Space between the contents of
the table and the table border
None None Measured in pixels
<table cellpacing=”
x”>
Inside Table Tag
Adds Space between the
Cells
None None Measured in pixels
<tr> After <table> tag
Begins a row in the table
</tr> After row A row is horizontal, be sure to end your row, or you will end up with your table being
formatted wrong <td> After <tr>
tag Begins a column
</td> After you’ve added the
cell content
It is the vertical separator of the row/table. Be sure to end your <td> and start a new one
before you add a new cell <td
colspan=”x”>
Inside <td> tag
Enables you to make one cell larger than others
None None It makes the cell span more columns than the rest. If you had a colspan of 2, you would span
2 columns.
<td rows=”x”>
Inside <td> tag
Enables you to make one cell larger than others
None None It makes the cell span more rows than the rest. If you had a entered rows=”2” you would span
two rows.
FramesFramesFrames are what allow you to Frames are what allow you to format your pages into rows format your pages into rows and columns. In my and columns. In my WebPage, I have used WebPage, I have used frames, I have two frames, frames, I have two frames, and the column is a frame. and the column is a frame. Frames are not visible on all Frames are not visible on all browsers and are hard to browsers and are hard to explain. My experiences explain. My experiences online have led me to a site online have led me to a site which will help you do frames which will help you do frames in your WebPage. The site is in your WebPage. The site is at:http://sharkysoft.com/tutorat:http://sharkysoft.com/tutorials/frames/ ials/frames/
Good SitesGood Sites• Basic Help: http://www.stars.com/AuthoringBasic Help: http://www.stars.com/Authoring• Browser Safe Colors: Browser Safe Colors:
http://www.stars.com/Graphics/Colours/666.htmlhttp://www.stars.com/Graphics/Colours/666.html• Frame Help: Frame Help:
http://sharkysoft.com/tutorials/frames/ http://sharkysoft.com/tutorials/frames/ • Pictures/Clip Art: Pictures/Clip Art:
http://www.rad.kumc.edu/icons/icons.htmhttp://www.rad.kumc.edu/icons/icons.htm
I hope that my page/PowerPoint I hope that my page/PowerPoint presentation had helped you to build your presentation had helped you to build your WebPage. If it has or has not and you would like WebPage. If it has or has not and you would like to contact me, you can email me your comments or to contact me, you can email me your comments or questions at [email protected] at [email protected].
Extra Formatting TagsExtra Formatting Tags
Tag Function Where End Where Extras
<br> Adds a space
Anywhere Never None None
<hr> Adds a Horizontal Line
Anywhere Never None Width, size, color, noshade
<pre> Allows for preformatted text
Anywhere <./pre>
After preformatted text
Allows for carrage returns, looks like it does in the HTML on the page
![[Basic HTML/CSS] 1. html - basic tags](https://img.pdfslide.net/doc/110x75/58ce75c41a28abdc578b67db/basic-htmlcss-1-html-basic-tags.jpg)
![[Basic HTML/CSS] 2. html - list tags](https://img.pdfslide.net/doc/110x75/58ce75c41a28abdc578b67d9/basic-htmlcss-2-html-list-tags.jpg)
![[Basic HTML/CSS] 3. html - table tags](https://img.pdfslide.net/doc/110x75/58ed3bb51a28ab7a278b4589/basic-htmlcss-3-html-table-tags.jpg)
