Scribd
Upload
54 views

HTML Elements and Tags: How Tags Are Used To Form Your Web Page

This document provides an overview of HTML elements and tags used to build web pages. It explains that web pages are made up of elements like the head and body. The head contains non-visible information like the title, while the body holds the visible content. Tags, which are enclosed in angle brackets, mark the beginning and end of elements. Common elements discussed include headings, paragraphs, lists, and formatting elements to style text. The document provides examples of how these elements and tags can be used to structure and style the content of a basic web page.

Uploaded by

kmardock064
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
54 views

HTML Elements and Tags: How Tags Are Used To Form Your Web Page

This document provides an overview of HTML elements and tags used to build web pages. It explains that web pages are made up of elements like the head and body. The head contains non-visible information like the title, while the body holds the visible content. Tags, which are enclosed in angle brackets, mark the beginning and end of elements. Common elements discussed include headings, paragraphs, lists, and formatting elements to style text. The document provides examples of how these elements and tags can be used to structure and style the content of a basic web page.

Uploaded by

kmardock064
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 15

HTML Elements and Tags

How Tags are used to form your Web Page

<html> What is HTML? </html>


HTML stands for Hyper Text Mark-up Language It is the basic set of rules that web browsers use to interpret and display internet documents
Building a Web Page Sheet

Elements
Web Pages are made up of elements or distinct parts
The Head
Usually at the top of the page Can hold lots of non-display information like styles The Title Found in the Head appears at the top of the window, in the colored bar

The Body
Where the text, pictures, tables, etc., that make up the page are located

Tags
Tags mark the beginning and end of a particular element. They (almost) always bracket the element
<html>
<head> <title> Tag Example</title> </head> <body> Here is the BODY</body> </html>

<head> Whats in Your Head? </head>


The Head is where you put information about your page or things, like styles, that affect your page, but shouldnt be displayed.

<!-- note tags --> can be used to enter text that will not be displayed
<meta> information tags help identify specifics about your page that might help a search engine find your site

Sample Page 1

<body> The Body is What You See </body>


<head> <title>Title of page</title> </head> <body> This is my webpage. I will replace this text with the text from my report. </body> Gives you this:
This is my webpage. I will replace this text with the text from my report.

Sample Page 1

<h1> A Heading is not in the Head </h1>


<body> <h1> This is the Heading at theTop of the Page</h1> <p>This is the body.</p> </body>

Gives you this:

This is the Heading at the Top of the Page


This is the body.
Heading Example 1

What you need to do:


Go to a computer and find the paper, titled Making the Web Page Type ALL of the text in the using Wordpad Save it to your file folder with your name in the title
If you finish early, fill in all the tags that are indicated on the Tag Mark-Up handout.

<h1> Heading Sizes </h1>


<h1> <h2> <h3> <h4> <h5> <h6>

Heading One Headings are not


Heading Two
Heading Three
Heading Four
Heading Five
Heading Six

numbered as they go down the page The <h1> through <h6> tags refer to the size of the heading Any Heading can be used anywhere on the page
Heading Sizes Example

<body> The Body </body>


This is where most of the page is It can include
Tables Lists Quotes Pictures Just about anything else

Body Elements Examples

<p> Paragraphs </p>


Paragraphs are separated by space from what comes before and after They are NOT, by default, indented
<p>Here is some interesting information about this.</p> <p>On the other hand, there is this information here.</p>

Here is some interesting information about this. On the other hand, there is this information here.

<ol> Ordered Lists </ol>


1. <ol> stands for Ordered List 2. <li> each thing in the list gets List Element tags </li> 3. The browser adds the numbers (or letters or
Roman numerals)

1. Come to class on time 2. Get out your materials for class 3. Be ready to participate 4. Raise your hand if you have a comment or question

4. Signal the end of the list </ol>

Ordered List Example

<ul> Un-Ordered List </ul>


These are Bulleted lists They dont have a particular sequence Each element still gets the <li> & </li> tags The list begins with <ul> It ends with </ul>
Unordered List Example

<b><u><i> Other Formats </b></u></i>


<body> <b>This is Bold </b> <i> This is Italicized </i> <u> This is Underlined </u> Here is a line <hr> <br> There will be a space before this </body>
Formatting Tricks

This is Bold This is Italicized This is Underlined Here is a line

There will be a space before this

What you need to do:


Fill in all the tags that are indicated on the Tag Mark-Up handout. or Enter your essay text into the body of the web page you created and saved. (if you
brought in the file, you should be able to open the file in Notebook, copy the text and paste it into the body of your web page)

You might also like