HTML

What is HTML? HTML is a language for creating web

pages. HTML stands for Hyper Text Markup

Language A markup language has tags which

are codes that tell the browser how to display the text.

HTML documents contain both HTML tags and plain text

Unformatted Web PageI Have a Dream By Martin Luther King, Jr. delivered 28 August 1963, at the Lincoln Memorial, Washington D.C. I have a dream that one day this nation will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident, that all men are created equal." I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners will be able to sit down together at the table of brotherhood. I have a dream that one day even the state of Mississippi, a state sweltering with the heat of injustice, sweltering with the heat of oppression, will be transformed into an oasis of freedom and justice. I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by the content of their character.

If I just typed in the text, and I didn’t format the web page with tags, it would look like this

Formatted Web Page

After I format the web pages with tags, it looks like this

What are HTML Tags??? HTML tags are letters surrounded by angle brackets

like <html> or <body> The browser does not display the HTML tags, but uses

the tags to determine how the content of the web page is to be displayed to the user.

HTML tags normally come in pairs like <p>and </p> or <title> and </title>, and the first tag is called either the start tag or the opening tag, and the second tag is called the end tag or the closing tag

The end tag is written like the start tag, except with a forward slash before the tag name

HTML Page Structure

<!DOCTYPE html><html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body></html>

Below is a visualization of the HTML code on the left:

Heading tag HTML headings are defined with the <h1> to <h6>

tags. The smaller the number, the larger the heading

Example<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3>

Paragraph tags Line Break tags

HTML paragraphs are defined with the <p> tag. Blank lines are inserted between paragraphs

Example Code:

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

This is a paragraph.

This is another paragraph.

A <br /> tag after a line forces the text after it to start on the next line. It does not insert a blank line.

Example Code:

This text is on the first line. <br />

And this text starts on the next line.

This text is on the first line. And this text starts on the next line.

Image tagsIn HTML, images are defined with the <img> tag. The <img> tag defines the attributes of the image only, and

has no closing tag. To display an image on a page, you need to use the src

attribute, which stands for sourceSyntax for defining an image: <img src=”location" alt=”description">“location” tells where the image is stored. “description” contains a word or words that will display if the user’s browser can’t see the image.If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.

Formatting tags

<b>This text is bold</b><i>This text is italic</i><u>This text is underlined</u><font color=“red” size=“5” font=“courier”>This text is red, size 5, and Courier</font>

This text is bold

This text is italic

This text is underlined

This text is red, size 5, and Courier.

Hyperlink tags and attributes

<a href="url”>link text</a>The <a> tag defines the text as a hyperlink. The href attribute tells the browser where the link is on the internet.Example:<a href="http://www.lewisteach.com">Computer Lab Website</a>which will display like this: Computer Lab Website and clicking on it will take you to www.lewisteach.com

Title tag and Head tag The <title> tag tells the user the name of the

website. The <title> tag must be enclosed in the <head>

section at the beginning of the webpage. The <head> section has information about the web page that is not displayed.Example:

<head> <title>Computer Lab Website</title></head>

Comment tagsThe programmer can insert comments that are notes for only the programmer to see. Comments are not displayed on the web page so they can’t be seen by the user.A comment is written like this: Note: There is an exclamation point after the opening bracket, but not before the closing bracket.

Let’s create a web page!

HTML

Documents

Transcript of HTML