1. Getting Started with HTML

2. HTML  Hyper Text Markup Language  HTML isn’t a program language, its known as a markup language  A Markup language has tags around the regular, readable words that tell your computer how to treat them.  Hypertext is a hyperlink, or link, any text that, when clicked, goes to another page is hypertext.  This text is usually blue with an underline, though the style and color can be changed.  Hyper Text Markup Language  HTML isn’t a program language, its known as a markup language  A Markup language has tags around the regular, readable words that tell your computer how to treat them.  Hypertext is a hyperlink, or link, any text that, when clicked, goes to another page is hypertext.  This text is usually blue with an underline, though the style and color can be changed.

3. HTML Sample Here is a simple example of markup tags in action  HTML Tags are surrounded by angle brackets or “Greater than, less than” signs:  HTML tags usually have an opening tag and a closing tag, the closing tag starting with a slash  Ex: is an opening tag, and is a closing tag  The above example would look something like this on a web browser:  HTML Tags are surrounded by angle brackets or “Greater than, less than” signs:  HTML tags usually have an opening tag and a closing tag, the closing tag starting with a slash  Ex: is an opening tag, and is a closing tag  The above example would look something like this on a web browser: Here is a simple example of markup tags in action  You can see that the bold begins at the opening tag, and ends at the closing tag.  Open the file, “text1.html” in Notepad or TextEdit to try it yourself  You can see that the bold begins at the opening tag, and ends at the closing tag.  Open the file, “text1.html” in Notepad or TextEdit to try it yourself

4. More Tags  Open “text2.html” and Try these tags and see what they do ,,  Remember to add the closing tag.  You can even overlap different tags, for example  Open “text2.html” and Try these tags and see what they do ,,  Remember to add the closing tag.  You can even overlap different tags, for example This line has both Bold and Underline ! Would look like

5. Practice Time Open “text3.html” in Notepad or TextEdit, and add HTML tags to make it look like this: The tags we’ve learned so far are and See if you an figure out the others you’ll need The tags we’ve learned so far are and See if you an figure out the others you’ll need

6. Something’s not quite right…  Let’s compare. The headings seem right, and the various markups all look right, but all the text is lumped together… Dose your webpage look like this? What went wrong?

7. Sorry, I did that on purpose…  Look back at your code. Web browsers don’t recognize line breaks.  We have to manually add in the a Linebreak code:  Look back at your code. Web browsers don’t recognize line breaks.  We have to manually add in the a Linebreak code: 1 2 3 123123 Would look like Note that there is no closing BR tag! Just add anywhere you want a line break. Note that there is no closing BR tag! Just add anywhere you want a line break.

8. OK, lets try that again.  Go back to your code and add in the tag to make a line break. Keep testing until it looks like this.

9. Too much space?  You’ll probably notice that adding a tag after an, or tag seems to add too many line breaks.  Heading tags have a built in line break, so you don’t need to add one there.  You’ll probably notice that adding a tag after an, or tag seems to add too many line breaks.  Heading tags have a built in line break, so you don’t need to add one there.

10. Does yours look something like this? This is sample text to test on. Some Basic HTML tags can let you do Bold Italics Underline and Strikethrough You can even double up on various tags, or put them all on at once ! There are three heading sizes, Heading 1 Heading 2 Heading 3 These are preset sizes for text headings Save this as an HTML document and test in a browser. Does it look like you thought it would? This is sample text to test on. Some Basic HTML tags can let you do Bold Italics Underline and Strikethrough You can even double up on various tags, or put them all on at once ! There are three heading sizes, Heading 1 Heading 2 Heading 3 These are preset sizes for text headings Save this as an HTML document and test in a browser. Does it look like you thought it would? Notice how I add my own line breaks, along with adding the coded line break,. This is just a personal preference, but it helps me keep track of content.

11. Take a break! Questions? Comments?

12. It’s not quite that simple…  There are several more tags to fully create an HTML page.  These tags are and  These tags help the browser, and automated website readers (screen readers for the blind, Google search robots, etc) understand the content.  There are several more tags to fully create an HTML page.  These tags are and  These tags help the browser, and automated website readers (screen readers for the blind, Google search robots, etc) understand the content.

13. The Tags An example of how these are used is on the next slide  - This tag goes around the whole document.  - Web page information that is not displayed normally can go here including the website’s title, scripts, etc.  - This is used to set a website’s title (see next slides for an example)  - all of the main content goes within the body tags An example of how these are used is on the next slide  - This tag goes around the whole document.  - Web page information that is not displayed normally can go here including the website’s title, scripts, etc.  - This is used to set a website’s title (see next slides for an example)  - all of the main content goes within the body tags

14. This is a simple, but complete web page This is my website All website content goes here. This is my website All website content goes here.

15. And here is how it looks in a browser Notice where the website title is displayed, and where the content is displayed.

16. Adding these tags to text3.html This is my website This is sample text to test on. Some Basic HTML tags can let you do Bold Italics Underline and Strikethrough You can even double up on various tags, or put them all on at once ! There are three heading sizes, Heading 1 Heading 2 Heading 3 These are preset sizes for text headings Save this as an HTML document and test in a browser. Does it look like you thought it would? This is my website This is sample text to test on. Some Basic HTML tags can let you do Bold Italics Underline and Strikethrough You can even double up on various tags, or put them all on at once ! There are three heading sizes, Heading 1 Heading 2 Heading 3 These are preset sizes for text headings Save this as an HTML document and test in a browser. Does it look like you thought it would?