Download presentation
Presentation is loading. Please wait.
1
HTML for Beginners An IEEE/ACM Presentation given by Hamilton Turner
2
What you need to have Running computer Text editor NotePad NotePad BB Edit BB Edit Web Browser Internet Explorer Internet Explorer Firefox Firefox Safari Safari Somewhere to save your work Note: You don’t have to work online! Note: You don’t have to work online!
3
How to use the materials Open text editor Type/Edit your HTML Hit ‘File → Save As’ Change ‘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 quotes Save our test page as “test.html” Point web browser to the file location Type something similar to C:/My_HTML/test.html in the browser bar Type something similar to C:/My_HTML/test.html in the browser bar
4
Tags Tags tell a browser (Internet Explorer, Firefox, ect) how to arrange information Tags start with ‘ ’ Normally tags come in pairs, and the closing tag starts with ‘</’ Examples This is bold and this is not This is bold and this is not Underlined! Not Underlined Underlined! Not Underlined
5
Basic Structure <html><head><title> Title of your page here! </title></head><body> Content goes here! </body></html>
6
First tags and and bolds bolds and and italicizes italicizes and and underlines underlines and and Puts in the center of the page, or ‘aligns center’ Puts in the center of the page, or ‘aligns center’
7
More basics and and Headers preset to help define sections Headers preset to help define sections Six different choices down to and Six different choices down to and The tag Causes a line break Causes a line break Difference between this is bold and This is bold and there is a line break Difference between this is bold and This is bold and there is a line break Why is there not a ? Why is there not a ? and and Paragraph tag Paragraph tag
8
Text tags and and ???? Can be a name of most common colors ???? Can be a name of most common colors Red, blue, green, black, yellow, ect X is a number preceded by a + or a – X is a number preceded by a + or a – will raise the font size by 2 will raise the font size by 2 This font is tiny!!!! This font is tiny!!!! Hexadecimal Colors? What does mean? What does mean? Red, Green, Blue – In order! Red, Green, Blue – In order! 0-9 then A-F, higher values mean more of that color 0-9 then A-F, higher values mean more of that color
9
Links! Go to Google! Go to Google! Hypertext reference What else can you do? Make an image a link Make an image a link Link to different places in your own page Link to different places in your own page Uses ‘anchors’ Relative versus Absolute links Absolute is normally the way to go when you are starting out! Absolute is normally the way to go when you are starting out!
10
Adding images Why is there no ? 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 title Use alt and title What is the difference? Alt is alternative text Title is, well, the title of the image Add a border Add a border Use a background image Use a background image
11
Some useful Stuff and - preformatted and - preformatted and - sub script and - sub script and - superscript and - superscript How to put in symbols and others and others http://www.w3schools.com/tags/ref_entities.as p http://www.w3schools.com/tags/ref_entities.as p
12
The body tag Attributes Bgcolor Bgcolor Text Text Link LinkAlinkVlink Background Background
13
The email link Add mailto:myaddress@whereever.com mailto:myaddress@whereever.com Example Email John! Email John! Add a subject Add ‘?subject=your subj here’ to the end Add ‘?subject=your subj here’ to the end Email John! Email John! You can add cc and bcc fields too After the subject, use ‘&cc=copy_to_me@bellsth.net’ or add ‘&bcc=a@a.com’ or both After the subject, use ‘&cc=copy_to_me@bellsth.net’ or add ‘&bcc=a@a.com’ or both
14
Adding sounds Link to the file Use the tag Src Src Width, height Width, height Good values are 144 width and 60 height Autostart Autostart True or false Loop Loop True or false Hidden Hidden True or false
15
META tags and why you want them META tags help search engines find your page Between and Between and Examples What is What is
16
The tag Horizontal rule Use these sparingly!! Attributes Width Width Align Align Size Size Default of 2 (pixels tall) Noshade Noshade True or false Color Color
17
Comments Start with Start with Comments are special tags You can type whatever you want in the middle Example
18
Lists and stand for un-ordered list and stand for un-ordered list Aka this is a list with bullets Aka this is a list with bullets and stand for ordered lists and stand for ordered lists 1. First Item 1. First Item 2. Second 2. Second 3. Ect 3. Ect and stand for list item and stand for list item These are used inside the and tags These are used inside the and tags
19
Lists, Examples <ul> This is the first item This is the first item This is the second This is the second This item will be numbered This item will be numbered So will this one! So will this one! the last un-ordered item the last un-ordered item </ul> Note how the tags match up, a starting tag always has a closing tag
20
Tables Tables are created out three main parts, or tags The and tag tells the browser that you are creating a table The table row tags ( and ) create a single row The table division tags ( and ) create a single cell within a row
21
Table, basic example <table> This is the top left cell This is the top left cell This is the top row, right cell This is the top row, right cell This is the bottom row, left cell This is the bottom row, left cell this is the bottom row, right cell this is the bottom row, right cell </table> This is the top left cell This is the top row, right cell This is the bottom row, left cell This is the bottom row, right cell
22
So why the ? The tag allows us to give attributes to the table as a whole Border Cell Spacing The space in between one cell and another The space in between one cell and another Cell Padding The space in between the edge of one cell and the actual content in that cell (normally text) The space in between the edge of one cell and the actual content in that cell (normally text)BgcolorBackground
23
Review Tags are the main parts of html Tags can be changed with attribute values hello hello is the opening tag is the opening tag Color is an attribute of the font tag Color is an attribute of the font tag is the closing tag is the closing tag Most tags apply to a section of code, and need a closing/ending tag Some tags, like and do not The correct way to ‘close’ these tags is the /> ending The correct way to ‘close’ these tags is the /> ending Most of the time they will work without it Most of the time they will work without it 99% of the time, and will do the same thing 99% of the time, and will do the same thing
24
Tags we know <html><center><font><meta> <head>,, ….,, …. <img><hr>,<ul>,<ol>,<li> <body><br>,,,, <table> <b>,<u>,<i> (normally called a href) (normally called a href)<embed><tr>,<td>
25
Lets build a simple site If you haven’t already, create a folder to store your HTML I Recommend C:/HTML for now, its easy to remember I Recommend C:/HTML for now, its easy to remember Freely create three different pages Remember the basic HTML structure Don’t fret, I will walk you through all of this, so if you don’t know where to start its ok You will make mistakes, that’s ok too. Its part of learning
26
Final notes Good places to learn more http://www.w3schools.com/html/ http://www.w3schools.com/html/ http://www.w3schools.com/html/ http://www.davesite.com/webstation/html/ http://www.davesite.com/webstation/html/ http://www.davesite.com/webstation/html/ Don’t try to memorize every HTML tag you see All you need to know is what is possible All you need to know is what is possible You can look up the specific tag You can look up the specific tag Aka, I would search ‘how do you create a table in HTML’ to find the specific tags Aka, I would search ‘how do you create a table in HTML’ to find the specific tags
27
Want to know more A common way to layout the content on your page is to make a large table Check out http://www.w3schools.com/html/tryit.asp?filename=try html_layout Check out http://www.w3schools.com/html/tryit.asp?filename=try html_layout http://www.w3schools.com/html/tryit.asp?filename=try html_layout http://www.w3schools.com/html/tryit.asp?filename=try html_layout You might see the word ‘deprecated’ a lot when learning This means there is a ‘newer’ way to do the same thing This means there is a ‘newer’ way to do the same thing This happens for a lot of reasons (simpler code, makes more sense, ect) This happens for a lot of reasons (simpler code, makes more sense, ect) 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 to ‘update’ 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 to ‘update’
28
So what’s next? Style Sheets Why??? Why??? See http://www.w3schools.com/html/html_whyuseht ml4.asp http://www.w3schools.com/html/html_whyuseht ml4.asp http://www.w3schools.com/html/html_whyuseht ml4.asp “The original HTML was never intended to contain tags for formatting a document…In HTML 4.0 all formatting can be removed from the HTML document and stored in a separate style sheet.” Hence, next weeks lesson is on CSS, or Cascading Style Sheets
Similar presentations
