Embed Size (px)
Citation preview
HTML for BeginnersHTML for Beginners
An IEEE/ACM Presentation given An IEEE/ACM Presentation given by Hamilton Turnerby Hamilton Turner
What you need to haveWhat you need to have
Running computerRunning computerText editorText editor NotePadNotePad BB EditBB Edit
Web BrowserWeb Browser Internet ExplorerInternet Explorer FirefoxFirefox SafariSafari
Somewhere to save your workSomewhere to save your work Note: You don’t have to work online!Note: You don’t have to work online!
How to use the materialsHow to use the materials
Open text editorOpen text editorType/Edit your HTMLType/Edit your HTMLHit ‘File Hit ‘File → → Save As’Save As’Change ‘Save as Type’ optionChange ‘Save as Type’ option Make it read ‘Save as Type: All files’Make it read ‘Save as Type: All files’
If that is not an option, put the name in quotesIf that is not an option, put the name in quotesSave our test page as “test.html”Save our test page as “test.html”Point web browser to the file locationPoint web browser to the file location Type something similar to C:/My_HTML/test.html in Type something similar to C:/My_HTML/test.html in
the browser barthe browser bar
TagsTags
Tags tell a browser (Internet Explorer, Tags tell a browser (Internet Explorer, Firefox, ect) how to arrange informationFirefox, ect) how to arrange information
Tags start with ‘<‘ and end with ‘>’Tags start with ‘<‘ and end with ‘>’
Normally tags come in pairs, and the Normally tags come in pairs, and the closing tag starts with ‘</’closing tag starts with ‘</’
ExamplesExamples <b>This is bold</b> and this is not<b>This is bold</b> and this is not <u>Underlined!</u> Not Underlined <u>Underlined!</u> Not Underlined
Basic StructureBasic Structure
<html><html><head><head>
<title><title>Title of your page here!Title of your page here!
</title></title>
</head></head><body><body>
Content goes here!Content goes here!
</body></body>
</html></html>
First tagsFirst tags
<b> and </b><b> and </b> boldsbolds
<i> and </i><i> and </i> italicizesitalicizes
<u> and </u><u> and </u> underlinesunderlines
<center> and </center><center> and </center> Puts in the center of the page, or ‘aligns Puts in the center of the page, or ‘aligns
center’center’
More basicsMore basics
<h1> and </h1><h1> and </h1> Headers preset to help define sectionsHeaders preset to help define sections Six different choices down to <h6> and </h6>Six different choices down to <h6> and </h6>
The <br /> tagThe <br /> tag Causes a line breakCauses a line break Difference between <b>this is bold</b> and <b> This Difference between <b>this is bold</b> and <b> This
is bold <br /> and there is a line break</b>is bold <br /> and there is a line break</b> Why is there not a </br>?Why is there not a </br>?
<p> and </p><p> and </p> Paragraph tagParagraph tag
Text tagsText tags
<font color=‘????’ size=‘<font color=‘????’ size=‘±X’> and </font>±X’> and </font> ???? Can be a name of most common colors???? Can be a name of most common colors
Red, blue, green, black, yellow, ectRed, blue, green, black, yellow, ect X is a number preceded by a + or a –X is a number preceded by a + or a –
<font size=‘+2’> will raise the font size by 2<font size=‘+2’> will raise the font size by 2
<font size=‘-7’>This font is tiny!!!!</font><font size=‘-7’>This font is tiny!!!!</font>
Hexadecimal Colors?Hexadecimal Colors? What does <font color=‘#00FF00’> mean?What does <font color=‘#00FF00’> mean? Red, Green, Blue – In order!Red, Green, Blue – In order! 0-9 then A-F, higher values mean more of that color0-9 then A-F, higher values mean more of that color
Links!Links!
<a href=‘http://www.google.com’> Go to Google! <a href=‘http://www.google.com’> Go to Google! </a></a>
Hypertext referenceHypertext reference
What else can you do?What else can you do? Make an image a linkMake an image a link Link to different places in your own pageLink to different places in your own page
Uses ‘anchors’Uses ‘anchors’
Relative versus Absolute linksRelative versus Absolute links Absolute is normally the way to go when you are Absolute is normally the way to go when you are
starting out!starting out!
Adding imagesAdding images
<img src=‘where is the image’ /><img src=‘where is the image’ />Why is there no </img> ?Why is there no </img> ?What else can I do?What else can I do? Align the image (center it, ect)Align the image (center it, ect) Resize the image (height and width)Resize the image (height and width) Use alt and titleUse alt and title
What is the difference?What is the difference?Alt is alternative textAlt is alternative textTitle is, well, the title of the imageTitle is, well, the title of the image
Add a borderAdd a border Use a background imageUse a background image
Some useful StuffSome useful Stuff
<pre> and </pre> - preformatted<pre> and </pre> - preformatted
<sub> and </sub> - sub script<sub> and </sub> - sub script
<sup> and </sup> - superscript<sup> and </sup> - superscript
How to put in symbolsHow to put in symbols and others and others http://www.w3schools.com/tags/http://www.w3schools.com/tags/
ref_entities.asp ref_entities.asp
The body tagThe body tag
AttributesAttributes BgcolorBgcolor TextText LinkLink
AlinkAlink
VlinkVlink BackgroundBackground
The email linkThe email link
Add Add mailto:[email protected]:[email protected] <a href=‘mailto:[email protected]’>Email John! </a><a href=‘mailto:[email protected]’>Email John! </a>
Add a subjectAdd a subject Add ‘?subject=your subj here’ to the endAdd ‘?subject=your subj here’ to the end <a href=‘mailto:[email protected]?subject=this is an <a href=‘mailto:[email protected]?subject=this is an
email from your website, john_at_bellsouth.com’> email from your website, john_at_bellsouth.com’> Email John! </a>Email John! </a>
You can add cc and bcc fields tooYou can add cc and bcc fields too After the subject, use ‘&[email protected]’ After the subject, use ‘&[email protected]’
or add ‘&[email protected]’ or bothor add ‘&[email protected]’ or both
Adding soundsAdding sounds
Link to the fileLink to the fileUse the <embed /> tagUse the <embed /> tag SrcSrc Width, heightWidth, height
Good values are 144 width and 60 heightGood values are 144 width and 60 height AutostartAutostart
True or falseTrue or false LoopLoop
True or falseTrue or false HiddenHidden
True or falseTrue or false
META tags and why you want themMETA tags and why you want them
META tags help search engines find your pageMETA tags help search engines find your page
Between <head> and </head>Between <head> and </head>
ExamplesExamples <meta name=‘keywords’ <meta name=‘keywords’
content=‘cool,page,first,HTML,attempt’>content=‘cool,page,first,HTML,attempt’> <meta name=‘description’ content=‘my first try at <meta name=‘description’ content=‘my first try at
making a web page with HTML, come check it out’>making a web page with HTML, come check it out’>
What is <META HTTP-EQUIV="refresh" What is <META HTTP-EQUIV="refresh" content="2;URL=http://www.yoursite.com/newpacontent="2;URL=http://www.yoursite.com/newpage.htm"> ge.htm">
The <hr /> tagThe <hr /> tag
Horizontal ruleHorizontal rule
Use these sparingly!!Use these sparingly!!
AttributesAttributes WidthWidth AlignAlign SizeSize
Default of 2 (pixels tall)Default of 2 (pixels tall) NoshadeNoshade
True or falseTrue or false ColorColor
CommentsComments
Start with <!-- and end with -->Start with <!-- and end with -->
Comments are special tagsComments are special tags
You can type whatever you want in the You can type whatever you want in the middlemiddle
ExampleExample <!-- This is where the music section of my <!-- This is where the music section of my
page starts -->page starts -->
ListsLists
<ul> and </ul> stand for un-ordered list<ul> and </ul> stand for un-ordered list Aka this is a list with bulletsAka this is a list with bullets
<ol> and </ol> stand for ordered lists<ol> and </ol> stand for ordered lists 1. First Item1. First Item 2. Second2. Second 3. Ect3. Ect
<li> and </li> stand for list item<li> and </li> stand for list item These are used inside the <ul></ul> and These are used inside the <ul></ul> and
<ol></ol> tags<ol></ol> tags
Lists, ExamplesLists, Examples
<ul><ul> <li>This is the first item</li><li>This is the first item</li> <li>This is the second</li><li>This is the second</li> <li><ol><li><ol>
<li>This item will be numbered</li><li>This item will be numbered</li> <li>So will this one!</li><li>So will this one!</li>
</ol></li></ol></li> <li>the last un-ordered item</li><li>the last un-ordered item</li>
</ul></ul>Note how the tags match up, a starting tag Note how the tags match up, a starting tag always has a closing tagalways has a closing tag
TablesTables
Tables are created out three main parts, or Tables are created out three main parts, or tagstags
The <table> and </table> tag tells the The <table> and </table> tag tells the browser that you are creating a tablebrowser that you are creating a table
The table row tags (<tr> and </tr>) create The table row tags (<tr> and </tr>) create a single rowa single row
The table division tags (<td> and </td>) The table division tags (<td> and </td>) create a single cell within a rowcreate a single cell within a row
Table, basic exampleTable, basic example<table><table> <tr><tr>
<td>This is the top left cell</td><td>This is the top left cell</td>
<td>This is the top row, right cell</td><td>This is the top row, right cell</td> </tr></tr> <tr><tr>
<td>This is the bottom row, left cell</td><td>This is the bottom row, left cell</td>
<td>this is the bottom row, right cell</td><td>this is the bottom row, right cell</td> </tr></tr>
</table></table>This is the top left This is the top left cellcell
This is the top row, This is the top row, right cellright cell
This is the bottom This is the bottom row, left cellrow, left cell
This is the bottom This is the bottom row, right cellrow, right cell
So why the <table> ?So why the <table> ?The <table> tag allows us to give attributes to The <table> tag allows us to give attributes to the table as a wholethe table as a wholeBorderBorderCell SpacingCell Spacing The space in between one cell and anotherThe space in between one cell and another
Cell PaddingCell Padding The space in between the edge of one cell and the The space in between the edge of one cell and the
actual content in that cell (normally text)actual content in that cell (normally text)
BgcolorBgcolorBackgroundBackground
ReviewReview
Tags are the main parts of htmlTags are the main parts of htmlTags can be changed with attribute valuesTags can be changed with attribute values<font color=“red”>hello</font><font color=“red”>hello</font>
<font> is the opening tag<font> is the opening tag Color is an attribute of the font tagColor is an attribute of the font tag </font> is the closing tag</font> is the closing tag
Most tags apply to a section of code, and need a Most tags apply to a section of code, and need a closing/ending tagclosing/ending tagSome tags, like <br /> and <img /> do notSome tags, like <br /> and <img /> do not
The correct way to ‘close’ these tags is the /> endingThe correct way to ‘close’ these tags is the /> ending Most of the time they will work without itMost of the time they will work without it 99% of the time, <br /> and <br> will do the same thing99% of the time, <br /> and <br> will do the same thing
Tags we knowTags we know<html><html> <center><center> <font><font> <meta><meta>
<head><head> <h1>,<h2>,<h3><h1>,<h2>,<h3>….<h6>….<h6>
<img><img> <hr>,<ul>,<hr>,<ul>,
<ol>,<li><ol>,<li>
<body><body> <br><br> <pre>,<sub><pre>,<sub>,<sup>,<sup>
<table><table>
<b><b>
,<u>,<i>,<u>,<i>
<a> (normally <a> (normally called a href)called a href)
<embed><embed> <tr>,<td><tr>,<td>
Lets build a simple siteLets build a simple site
If you haven’t already, create a folder to store If you haven’t already, create a folder to store your HTMLyour HTML I Recommend C:/HTML for now, its easy to rememberI Recommend C:/HTML for now, its easy to remember
Freely create three different pagesFreely create three different pages
Remember the basic HTML structureRemember the basic HTML structure
Don’t fret, I will walk you through all of this, so if Don’t fret, I will walk you through all of this, so if you don’t know where to start its okyou don’t know where to start its ok
You will make mistakes, that’s ok too. Its part of You will make mistakes, that’s ok too. Its part of learninglearning
Final notesFinal notes
Good places to learn moreGood places to learn more http://www.w3schools.com/html/http://www.w3schools.com/html/ http://www.davesite.com/webstation/html/http://www.davesite.com/webstation/html/
Don’t try to memorize every HTML tag you Don’t try to memorize every HTML tag you seesee All you need to know is what is possibleAll you need to know is what is possible You can look up the specific tagYou can look up the specific tag Aka, I would search ‘how do you create a Aka, I would search ‘how do you create a
table in HTML’ to find the specific tagstable in HTML’ to find the specific tags
Want to know moreWant to know more
A common way to layout the content on your A common way to layout the content on your page is to make a large tablepage is to make a large table Check out Check out
http://www.w3schools.com/html/tryit.asp?filename=tryhttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_layouthtml_layout
You might see the word ‘deprecated’ a lot when You might see the word ‘deprecated’ a lot when learninglearning This means there is a ‘newer’ way to do the same This means there is a ‘newer’ way to do the same
thingthing This happens for a lot of reasons (simpler code, This happens for a lot of reasons (simpler code,
makes more sense, ect)makes more sense, ect) Normally the old way will still work, so don’t stress to Normally the old way will still work, so don’t stress to
much, its not the end of your site and you don’t have much, its not the end of your site and you don’t have to ‘update’to ‘update’
So what’s next?So what’s next?
Style SheetsStyle Sheets Why???Why???
See See http://www.w3schools.com/html/html_whyusehthttp://www.w3schools.com/html/html_whyusehtml4.aspml4.asp ““The original HTML was The original HTML was never intendednever intended to to contain tags for contain tags for formattingformatting a document…In a document…In HTML 4.0 HTML 4.0 all formatting can be removedall formatting can be removed from from the HTML document and stored in a separate the HTML document and stored in a separate style sheet.”style sheet.”Hence, next weeks lesson is on CSS, or Hence, next weeks lesson is on CSS, or Cascading Style SheetsCascading Style Sheets
