Scribd
Upload
40 views

HTML Basics 1

This document provides an introduction to HTML and covers the following key points in HTML lessons: 1. HTML is the language used to write web pages, using simple tags and commands that are translated by browsers. The basic tools needed are a text editor and browser. 2. HTML standards are determined by the W3C organization. Tags come in pairs and are used to structure and contain content on a page within the head and body sections. 3. Formatting tags properly and using attributes allows control over things like page titles, backgrounds, and text. Writing simple HTML code and viewing it in a browser demonstrates how tags work to display web pages.

Uploaded by

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

HTML Basics 1

This document provides an introduction to HTML and covers the following key points in HTML lessons: 1. HTML is the language used to write web pages, using simple tags and commands that are translated by browsers. The basic tools needed are a text editor and browser. 2. HTML standards are determined by the W3C organization. Tags come in pairs and are used to structure and contain content on a page within the head and body sections. 3. Formatting tags properly and using attributes allows control over things like page titles, backgrounds, and text. Writing simple HTML code and viewing it in a browser demonstrates how tags work to display web pages.

Uploaded by

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

Intro to HTML

Lesson 1

What is HTML?

HTML - Hypertext Markup Language is a language used to make web pages. A set of simple commands A computer translates the code All web pages are written using HTML code.

What do I need?

You need two VERY simple programs to write and read HTML A text editor Browser

After the HTML is coded

WC3

HTML is always changing The World Wide Web Consortium is the organization that determines what the official HTML language contains To find out the latest versions visit www.w3.org

Documents

HTML docs have two main parts:


The HEAD holds info about the page The BODY holds info that will be displayed on the web page

Tags

HTML commands are called tags Tags have several important characteristics Tags are always enclosed in angle brackets < > Most tags come in pairs One start tag and one end tag <html> </html>

Tags

Tags can be written in upper or lower case letters You should always be consistent

Use ALL upper case or ALL lower case

Writing your first Web Page


Open Notepad Write the following HTML exactly as you see it here
<html> <head> <title> MY First Web Page</title> </head> <body> This is my first web page! </body> </html>

Check in the Browser

Save the file as index.htm to your directory Go to your directory on look at the file

The browser recognizes it as a file it can open

Open it and view it Notice the title on the browser

Trouble Shooting

If you dont see your file or it doesnt open you have a problem Computers are precise and the code must be perfect. Double check that your code is exactly as I had displayed

Tags Dont show

Notice the tags dont show in the browser Angle brackets are tags, anything between <angle><brackets> dont appear Only content is displayed

Tags as Containers

Tags contain the info you want to be displayed They tell the browser what to do with that information You used <html> and </html> tag pairs in your first web page These are at the beginning and end of your document They contain the whole HTML document

Tags as Containers cont

The <head> </head> tags define the head section of the page The <title> </title> tags define the title of the page that appears in the browsers titlebar And <body> does the same

Formatting Your HTML

It is very important to format your tags so you and others (me) can read them Consider the following

Formatting Your HTML cont


<html> <head> <title> MY First Web Page</title> </head> <body> This is my first web page! </body> </html>
<html><head><title>MY First Web Page</title></head><body>This is my first web page!</body> </html>

The above examples reach the same end but one is far easier to read.

Attributes

Tags can have attributes They are extra commands that are added into a tag to give you more control over the tags functions

Attributes

Example of an attribute <body> has an attribute called bgcolor This controls the background colour of a web page Attributes also have values <body bgcolor=blue
tag

attribute

value

Attributes and Values

Attributes and values always follow the same format:

<tag attribute=value>

A tag can have many attributes They can be written in any order, just separated by a space

<body bgcolor=blue text=white>

Exercise

Open Notepad Type the start and end <html> tags Type the start and end <head> tags to make the head section
<html> <head>

</head>
</html>

Exercise cont

Type in the start and end <title> tags into the head section Name your web page My Second Page Give the <body> tag a green bgcolor attribute and a white text attribute
<html> <head>

<title> My Second Page</title>


</head> <body bgcolor=green text=white> </body> </html>

Exercise cont

Position the cursor between the <body> tags and type: Here is my second page with a green back ground color attribute and a white text attribute.
<html> <head> <title> My Second Page</title> </head> <body bgcolor=green text=white> Here is my second page with a green back ground color attribute and a white text attribute </body> </html>

Exercise cont

Save the file as page2.htm in your directory and then go to My Computer and browse to your directory and double click on the file you just saved. Why .htm ? You should see Internet Explorer open up your second web page!

Source Code

Go to your favorite sites and view the source code!

You might also like