Getting Started with HTMLGetting Started with HTML

HTMLHTML

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.

HTML SampleHTML SampleHere is a simple example of <b>markup tags</b> in action

HTML Tags are surrounded by angle brackets or “Greater than, less than” signs: < and >

HTML tags usually have an opening tag and a closing tag, the closing tag starting with a slash

Ex: <b> is an opening tag, and </b> 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: < and >

HTML tags usually have an opening tag and a closing tag, the closing tag starting with a slash

Ex: <b> is an opening tag, and </b> 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

More TagsMore Tags Open “text2.html” and Try these tags and see what

they do <i>, <u>, <h1> 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

<i>, <u>, <h1> Remember to add the closing tag.

You can even overlap different tags, for example

This line has both <b>Bold <u>and</u> Underline</b>!

This line has both Bold and Underline!

Would look likeWould look like

Practice TimePractice TimeOpen “text3.html” in Notepad or TextEdit, and add

HTML tags to make it look like this: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 <b> <i> <u> and <h1>

See if you an figure out the others you’ll need

The tags we’ve learned so far are <b> <i> <u> and <h1>

See if you an figure out the others you’ll need

Something’s not quite right…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…

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?Dose your webpage look like this? What went wrong?

Sorry, I did that on purpose…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 <br> 2 <br> 3

123

Would look likeWould look like

Note that there is no closing BR tag!

Just add <br> anywhere you want a line break.

Note that there is no closing BR tag!

Just add <br> anywhere you want a line break.

OK, lets try that again.OK, lets try that again. Go back to your code and add in the <br> tag to make a

line break. Keep testing until it looks like this.

Go back to your code and add in the <br> tag to make a line break. Keep testing until it looks like this.

Too much space?Too much space?

You’ll probably notice that adding a <br> tag after an <h1>, <h2> or <h3> 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 <br> tag after an <h1>, <h2> or <h3> 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.

Does yours look something like this?Does yours look something like this?This is sample text to test on.<br><br>Some Basic HTML tags can let you do<br><b>Bold</b> <i>Italics</i> <u>Underline</u> and <s>Strikethrough</s><br><br><b>You can even <u>double up</u> on <i>various <u>tags</u></i></b>, or put

them <b><i><u><s>all on at once</s></u></i></b>!<br><br>There are three heading sizes,<br><h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3>These are preset sizes for text headings<br><br>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.<br><br>Some Basic HTML tags can let you do<br><b>Bold</b> <i>Italics</i> <u>Underline</u> and <s>Strikethrough</s><br><br><b>You can even <u>double up</u> on <i>various <u>tags</u></i></b>, or put

them <b><i><u><s>all on at once</s></u></i></b>!<br><br>There are three heading sizes,<br><h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3>These are preset sizes for text headings<br><br>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, <br>. This is just a personal preference, but it helps me keep track of content.

Notice how I add my own line breaks, along with adding the coded line break, <br>. This is just a personal preference, but it helps me keep track of content.

Take a break!Take a break!

Questions? Comments?Questions? Comments?

QuickTime™ and a decompressor

are needed to see this picture.

It’s not quite that simple…It’s not quite that simple…

There are several more tags to fully create an HTML page.

These tags are <head><title> and <body> 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 <head><title> and <body> These tags help the browser, and automated

website readers (screen readers for the blind, Google search robots, etc) understand the content.

The TagsThe Tags

An example of how these are used is on the next slide

<html> - This tag goes around the whole document.

<head> - Web page information that is not displayed normally can go here including the website’s title, scripts, etc.

<title> - This is used to set a website’s title (see next slides for an example)

<body> - all of the main content goes within the body tags

An example of how these are used is on the next slide

<html> - This tag goes around the whole document.

<head> - Web page information that is not displayed normally can go here including the website’s title, scripts, etc.

<title> - This is used to set a website’s title (see next slides for an example)

<body> - all of the main content goes within the body tags

This is a simple, but complete web pageThis is a simple, but complete web page

<html><head><title>This is my website</title></head><body>All website content goes here.</body></html>

<html><head><title>This is my website</title></head><body>All website content goes here.</body></html>

And here is how it looks in a browserAnd here is how it looks in a browser

Notice where the website title is displayed, and where the content is displayed.

Notice where the website title is displayed, and where the content is displayed.

Adding these tags to text3.htmlAdding these tags to text3.html<html><head><title>This is my website</title></head><body>This is sample text to test on.<br><br>Some Basic HTML tags can let you do<br><b>Bold</b> <i>Italics</i> <u>Underline</u> and <s>Strikethrough</s><br><br><b>You can even <u>double up</u> on <i>various <u>tags</u></i></b>, or put them <b><i><u><s>all on at

once</s></u></i></b>!<br><br>There are three heading sizes,<br><h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3>These are preset sizes for text headings<br><br>Save this as an HTML document and test in a browser. Does it look like you thought it would?</body></html>

<html><head><title>This is my website</title></head><body>This is sample text to test on.<br><br>Some Basic HTML tags can let you do<br><b>Bold</b> <i>Italics</i> <u>Underline</u> and <s>Strikethrough</s><br><br><b>You can even <u>double up</u> on <i>various <u>tags</u></i></b>, or put them <b><i><u><s>all on at

once</s></u></i></b>!<br><br>There are three heading sizes,<br><h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3>These are preset sizes for text headings<br><br>Save this as an HTML document and test in a browser. Does it look like you thought it would?</body></html>