Scribd
Upload
2 views

HTML Part 1

This document serves as an introductory guide to HTML, covering essential concepts such as tags, attributes, and the structure of an HTML page. It explains the importance of elements like titles, headings, and paragraphs, as well as how to create lists and links. The document emphasizes best practices for writing HTML, including the use of closing tags and lowercase elements.

Uploaded by

jinyoung070509
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

HTML Part 1

This document serves as an introductory guide to HTML, covering essential concepts such as tags, attributes, and the structure of an HTML page. It explains the importance of elements like titles, headings, and paragraphs, as well as how to create lists and links. The document emphasizes best practices for writing HTML, including the use of closing tags and lowercase elements.

Uploaded by

jinyoung070509
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

HTML PART I

1. Getting Started: What You Need to Do to Get Going and Make Your First HTML
Page
1.1 What is HTML?
1.2 What you need to know about HTML to get started
2. Tags, Attributes and Elements
2.1 HTML elements
2.2 Tips
2.3 Attributes
3. Titles. Headings. Paragraphs.
3.1 The title tag
3.2 Headings
3.3 Paragraphs
4. Unnumbered, Numbered and Nested Lists
4.1 Ordered lists
4.2 Unordered lists
4.3 Nested lists
5. How to Makes Links to Other Pages and Elsewhere
5.1 Regular or text links
5.2 Image links
6. How to Work with Images
6.1 The alt attribute
6.2 The width and height attributes
6.3 Align your images
6.4 Adding links to your images
1. Getting Started:
1.1 What is HTML?

HTML is actually shorthand for Hypertext Markup Language. It is the language of Web
pages that tells a browser how to display certain elements, such as text and images through
the use of codes and symbols.
HTML Hypertext Markup Language .
.

HTML is the standard when it comes to creating Web pages. Being such, most browsers
implement HTML to help display Web pages more or less uniformly.
HTML .
HTML .

1.2 What you need to know about HTML to get started

You can start with using Notepad, a text editor that is included in your Windows installation.
If you are not using Windows, or if you prefer other text editors, there is a lot of free software
that you can download from the Internet.
There are two things that you need to know to get started with HTML:
1. The basic tags and elements.
2. The structure of an HTML page.
Windows Notepad . Windows

.
HTML .
1. .
2. HTML .

1. Basic tags and elements

HTML is a markup language. As such, you will need to know the various tags and elements
that it uses. HTML . .
Tags usually come in pairs. An opening tag will signify that the browser should treat the
succeeding text using that tag's properties and a closing tag would end it.

.
, .

For example, the opening <strong> tag and its corresponding closing </strong> tag will render
all the text in between in bold. i.e.,
, <strong> </strong> .
,
“My name is <strong>Clark Kent</strong>” will be displayed as: My name
is Clark Kent.
And then there are what we call the "empty elements" or those that work without a closing or
opening tag. Empty elements are often described as selfclosing tags.
" " , .
.

There are quite a few empty elements such as:


● br
● col
● frame
● hr
● img
● input
● link
● param

All of these can stand alone. For example, line breaks in HTML documents are often denoted
by <br />.

2. Structure of an HTML page

HTML is very simple and it is logical. A browser would start reading an HTML page from the
top going down, from left going right.
It does follow a basic structure. First, you have to declare that the document is an HTML
document. You can do this by using the <html> tag.
Then there are the two other sections called the <head> and <body> of your document.
The <head> is where you put in all the information you want to include about your document.
The <body> is basically the content of your HTML document.

HTML . , HTML
.

. , HTML . <html>
.

<head> <body> .

<head> .

<body> HTML .

Put in another way, the <body> section is what people see when they view your HTML
document.

Remember how you need to close a tag in HTML? You would also need to close
<html>, <head> and <body>, so that the basic HTML document would look like this:

, <body> HTML .
HTML ?
<html>, <head> <body> HTML .

<html>
<head>
</head>
<body>
</body>
</html>

Now you have the foundations of creating your first HTML page!

2. Tags, Attributes and Elements


2.1 HTML Elements

An HTML element has the following syntax:


1. An HTML element begins with an opening or start tag, i.e., <p>.
2. An HTML element ends with a closing or end tag, i.e. </p>.
3. The property of an HTML content is enclosed within the start and end tags, i.e.,
<p>This is the element content. </p>.
4. It may also contain an attribute.
HTML .
1. HTML , <p> .
2. HTML , </p> .
3. HTML . ,
<p>This is the element content. </p>.
5. .

1. Empty Elements

Some HTML elements do have content and are simply called empty elements. These
elements are ended or closed with the opening tag, i.e, <br/>.

HTML . , <br/>
.

2. Nestled Elements

Then there is also what is called the "nestled elements." Nestled elements are HTML
elements that are found within other HTML elements. For example, this is a nestled
element:
<p>I do not know <strong>what it was</strong>.</p>
Lastly, an HTML element may contain attributes, which we will discuss later on.
" " . HTML HTML
. , .
<p> <strong> </strong> .</p>
, HTML .

3. Some Commonly Used HTML Tags Include:

Name of HTML Tag Use of HTML tag Example(how to use in Output of example
a program)
<b> displays boldfaced <b>hello</b> hello
text

<u> displays the text in <u>hello</u> hello


italics

<i> displays the text in <i>hello</i> hello


italics

<center> displays the text in the <center>hello</center> hello


center of the line

<strike> to strikes out the text <strike>hello</strike> hello


<mark> to highlight the text <mark>hello</mark> hello
<br> enters a line break <br>
into paragraphs

<pre> to print the text in a <pre>hello<pre>


pre formatted form
<em> which shows <em>hello</em> hello
emphasis

<hr> inserts a horizontal <hr>


rule
<p> which introduces a <p>hello</p> Hello
paragraph
<h1>,<h2>,<h3>,through display HTML <h1>hello</h1>
<h6> headings
<a> shows a hyperlink
<table> introduces a table

4. Uses of HTML elements

HTML elements serve a variety of purposes:


1. HTML elements can describe the purpose of the text, as well as give it structure. A good
example of this type of HTML elements is <h1>, <h2> and other HTML headers. For
instance,<h1>Introduction</h1> communicates that "Introduction" is a first level heading.
Take note that structural HTML elements only provide structure and do not have specific
standards for display. A browser, however, can have default display for this type of elements,
hence you often see header tags being bigger than normal text on your browser.
2. HTML elements can dictate how certain content would appear. For instance, using
<b> would render the text in boldface, while using <i> will display the text in italics.

3. HTML elements that link your HTML document to another documents. For instance, you
can use <a> to link your document to another document.
HTML .
1. HTML . HTML
<h1>, <h2> HTML . , <h1> </h1> " "
. HTML
.
.
2. HTML . ,
<b> <i> .

3. HTML HTML . , <a>


.

2.2 Tips

1. Always put in the closing tag.

There are HTML elements that are not empty elements but may be written without a closing
tag. Because browsers are able to recognize them, they present no problem. For example,
the <p> element, which starts a paragraph, is often not closed.

1. .

HTML .
. , <p> .
<p>This is what we are talking about.
However, it is still best practice to close HTML elements.

Most Web browsers will consider the closing tag for <p> optional and the paragraph will
display properly. Yet, this would not be the case for all Web browsers. To be sure, always
put the closing tag at the end.

How is this case different from empty elements? An empty element is when no closing tags
are required. Additionally, no closing tags exist or are allowed in empty elements. For
example, <br> does not have a corresponding closing tag: </br> does not exist in HTML.
Whereas, technically, you would need to close the HTML element above by using </p>.
HTML .

<p> .
. .

? .
. , <br> .
</br> HTML .
HTML </p> .

2. Use lowercase when writing elements.

HTML tags are not case sensitive. This means that you can write <p>, <P> or even
</P> or </p>.
However, standards recommend using lowercase for HTML elements in HTML4 and
requires it in XHTML.
2. .
HTML . , <p>, <P>
</P> </p> .
HTML4 HTML XHTML
.

2.3 Attributes

Another term you would need to know when it comes to HTML elements are attributes.
Attributes modify the tags where they appear. Attributes are namevalue pairs, which are
separated by the equal sign.

HTML . .
.
The HTML element <a href="nextofkin.html">Next of kin</a> contains the attribute
href="nextofkin.html". Attributes usually use the following syntax:

<tag attribute="value of attribute">content</tag>

A lot of people confuse the alt attribute as a tag. It is not. The alt attribute modifies the
<img>, <area>, <input> and <applet> tags, which makes it an attribute.

Some of the most commonly used attributes, aside from href and alt include:
● align
● bgcolor
● src
● height
● width
● value
● href
● hspace
● id
● class
● style
● title
These are the basics you need to know about tags, attributes and elements.

3. Titles. Headings. Paragraphs

One of the things that you should realize when working with HTML is that it is not just a
markup language that you need to use in order to create a Web page. HTML is highly
readable and understandable, even though you are just looking at its code. For the most
part, you would see how everything is structured just by looking at its code.
So looking at the source code, you would be able to look at an HTML document and
understand how a page would look like.
With that in mind, you should be able to work pretty well with titles, paragraphs and
headings.
HTML
. HTML .
.
HTML .
, .
3.1 The Title Tag

The title is required for all HTML documents and it comes with other benefits:
● It will identify what your document is all about.
● Titles also show up on the browser window or tab, making it easy for people to identify
which tab to click on to access your Web page if they have a lot of tabs open at the
same time.
● Title tags are also used for bookmarks. So if you are in the habit of bookmarking
pages, title tags would provide a good way to identify the pages in the future.
HTML .
● .
●
.
● .
.
The correct way to write your title is to use the following syntax:
<title> Write Your Document's Title Here. </title>

You should place your title element within the <head> section of your HTML document.
When you have the <title> in place, you can now start writing the content that is visible
to humans. It's the content that you put within the <body> section of your HTML document.
HTML <head> title .
<title> .
HTML <body> .

3.2 Headings

Headings are important to use in your document. They give it some structure. HTML allows you to
have six different headings:

. . HTML
.

<h1>, <h2>,< h3>, <h4>, <h5> and <h6>.

Headings follow the following syntax:


<h1>The texts for Heading 1 go here</h1>
<h2>The texts for Heading 2 go here</h2>
<h3>The texts for Heading 3 go here</h3>
<h4> The texts for Heading 4 go here</h4>
<h5> The texts for Heading 5 go here</h5>
<h6>The texts for Heading 6 go here</h6>

You can use headings according to importance. For instance, you can use <h1> for your
most important headings and <h2> to <h6> for your less important ones.
You can also use headings to group and organize your content so that <h1> becomes your
main section headings, while <h2> will introduce a subsection within your main section and
<h3> will introduce further subsections within your <h2> subsection. If your page includes a
title, you might want to use <h1> for the title, and <h2> for the main sections, and through
<h3> for subsections.
. , <h1>
<h2>~<h6> .
<h1> , <h2>
, <h3> <h2> .
<h1> , <h2> , <h3>
.

As such, it is very important to use headings to:


● Make your document more readable.
● Make your document easy to skim. By looking at the headings, readers would be able
to know the content of your page, the main sections and subsections.
● Headings can also help your page become more search enginefriendly (SEO).
When you have headings in your document, make use of the headings tag. There are other
tags that you could use to achieve the same formatting as headings, but refrain from using
them.

.
● .
● . , .
● (SEO) .

.
.
For example:

<big>This Is a Heading</big> may be displayed the same way as


<h1>This Is a Heading </h1>
However, if you are looking at the source code, it would be much
easier to know that
</p><h1> is the main heading than if you use <big> and other similar tags.

Take note that headings are not formatting tags and that they do not tell the browser how to
display the content in any particular manner. It just so happens that most browsers
recognize headings and they have their own way of displaying these. The different
formatting you see for <h1>, <h2> through <h6> will depend on what browser you use.

. . <h1>, <h2>
<h6> .

You can, however, format your headings to be displayed by using cascading stylesheets.
.

3.3 Paragraphs

When working with HTML documents, you would need to use the paragraph tag <p> in
order to insert white space between two paragraphs.

You can use the following syntax when writing a paragraph for your HTML document:
HTML <p> .

HTML .
<p>Paragraph 1 starts here</p>.
<p>The second paragraph would follow here.</p>
It is important to remember that you would need to add the closing tag </p> after you write
every paragraph, because paragraphs are not empty elements.
You may skip on adding </p> at the end, and most browsers will ignore it and display your
paragraph right. But some browsers may return errors when you do not put
</p>.And that's everything you need to know first about titles, headings and paragraphs in
HTML.
</p> .
.
</p> ,
.
</p> . HTML ,
.

4. Unnumbered, Numbered, Definition and Nested Lists (Part 4)

There are two most common lists used in HTML and these are:
● Ordered list.
● Unordered list

HTML .
● .
● Ordered Lists
You use ordered lists if the sequence of your items is important. Ordered lists enumerate the
various items on your list on separate lines. It will have less space in between items, unlike
when you use or paragraph tags. Lastly, ordered lists are typically indented. The usual
syntax for ordered lists is as follows:

.
. .
. .
<ol>
<li>This is the first item on the list. </li>
<li>This is the second item on the list. </li>
<li>This is the third item on the list. </li>
</ol>

This will be displayed as:


1. This is the first item on the list.
2. This is the second item on the list.
3. This is the third item on the list.
.
1. .
2. .
3. .

Attributes that you can use with ordered lists


As with other tags, you can change how ordered lists look by adding attributes. Two of the
most used attributes are type and start.

.
type start .

1. Type

Instead of numbers, you can also have letters and Roman numerals. Types and their
corresponding syntax are as follows:
<ol type="a"> will display a, b, c
<ol type="A"> will display A, B, C
<ol type="i"> will display i, ii, iii
<ol type="I"> will display I, II, III

2. Start

You can have your ordered lists start with any number you want. For example:

<ol start="3">
The resulting list will start with 3 accompanying the first item.
<ol start="3">
<li>This is the first item on the list.</li>
<li>This is the second item on the list.</li>
<li>This is the third item on the list.</li>
</ol>

This will be displayed as:


1. This is the first item on the list.
2. This is the second item on the list.
3. This is the third item on the list.
This is particularly useful if you have to interrupt your list to explain something. You can start
off where the previous list ends.
.
1. .
2. .
3. .
.
.

4.1 Unordered Lists

Unordered lists are also called bulleted lists and, unlike ordered lists, the sequence of items is
not important in this type of list.

Similar to ordered lists, each item in your list is presented on separate lines, introduced by a
bullet. Unordered lists are also indented.

You can create an unordered list by using the following syntax:


,
.
.
.

.
<ul>
<li>This is item #1.</li>
<li>This is item #2.</li>
<li>This is item #3.</li>
</ul>

This will display as:


● This is item #1.
● This is item #2.
● This is item #3.

.
● #1 .
● #2 .
● #3 .
Further, if you are using HTML versions earlier than HTML 4, you can change the bullet by
specifying the type.
For example, using:
<ul type="square"> will display a square filledin bullet.
<ul type="circle"> will display a circle bullet that is not filled in.
4.2 Nested lists
A nested list may be an unordered list or an ordered list where you can have sublists for any
item you want. This is good if you have complicated lists wherein you might need to
enumerate another list for an item in your original list. Perhaps the simplest way to describe
nested lists is that it is a list within a list.
The correct syntax for nested lists would be:

. .
.
.
<ul>
<li>This is item #1.</li>
<li>This is item #2.
<ul>
<li>This is item #2 (a).</li>
<li>This is item #2 (b).</li>
</ul>
</li>
<li>This is item #3.</li>
</ul>

This would be displayed as:


● This is item #1.
● This is item #2.
○ This is item #2 (a).
○ This is item #2 (b).
● This is item #3.

If you need to use an ordered list, you can just replace <ul> with <ol>.
<ul> <ol> .
For example:
<ol>
<li>Jeans</li>
<li>Shirts
<ul>
<li>Navy blue.</li>
<li>Plain white.</li>
</ul>
</li>
<li>This is item #3.</li>
</ol>

Will be displayed as:


1. Jeans
2. Shirts
● Navy blue.
● Plain white.
3. This is item #3.

5. HTML for Beginners: How to Makes Links to Other Pages and Elsewhere

As you already know, links are a vital part of Web pages. Links allow you to move smoothly
from one page to another. It allows you to navigate from page to page. It also enables you
to get more information about a certain topic.

As such, there are a lot of different types of links that you should know when learning HTML.
Let us first concentrate on the body of your HTML document. What are these link types that
you should know about?
● Regular or text links
● Image links
● Links to email addresses
● Placeholder or anchor Links

, .
. .
.
HTML . HTML
. ?
●
●
●
●

5.1 Regular or Text Links

The most common type of link is the text link. These are text that are usually rendered
underlined and in blue, and allows you to visit a linked resource.
To create a simple text link, use the <a> tag by following this syntax:

.
, .
<a> .

<a href="URL of page you want to link to">link text</a>

What does this syntax mean?


● The <a> tag opens the link element.
● The href attribute will tell you the destination of the link.
● The "link text" could be anything from a simple description of the linked page to something
like "click here" or "visit the page."
● The </a> tag closes the element.
?
● <a> .
● href .
●" " " " " "
.
● </a> .

For example:
<a href="http://www.google.com">Google It!</a>
Would show as: Google It!
Clicking on that link will take you to http://www.google.com. Take note that the destination
URL does not have to be an HTML page or a Web page. Links could take you to an image
file, a Word document, a PDF file, or even audio, video and other multimedia files.
http://www.google.com . URL HTML
. , Word , PDF , ,
.

5.2 Image Links

Sometimes, you would want to use an image instead of a text link. That is possible too. To
use an image as your link, use the following syntax:

. .
.
<a href="URL">
<img src="image.jpg" alt="alt text of image"></a>

On your page, the picture called image.jpg will be linked to any URL you have.
image.jpg URL .
6. How to work with images:
Images are a big part of any Web page. It helps to drive your point across and helps
to get your site visitor's attention. How do you insert images into your page?
.
. ?
You need to use this code:
<img src="imagefile.jpg" alt="image on your site" width="100" height="100">

The <img> tag introduces an image, the attribute src or source allows you to point to your
image file. The alt attribute stands for alternative text. This is what shows up when the
image cannot be shown for some reason (slow Internet connection or server is not
responding). The width and height attributes determine the dimensions of the image.

Take a note that you should use the full URL of the image if it is not hosted on the same
directory as your HTML document.
<img> , src source
. alt . (
) . width height
.
HTML URL .
For example:
<img src="http://www.whereisyourimage.net/imagefile.jpg" alt="image on another site"
width="100" height="100">

6.1 The alt attribute

It is very important that you should fill in the alt attribute. At the very least, it would give
people an idea what the image is all about, even if they are not able to see it.

However, the alt attribute, which is most often mistakenly called the alt tag, also serves
other purposes.
For example:
1. A blind person accessing your Web site via a screen reader will hear the alt attribute,
allowing him or her to "see" the image you have included in your page.
2. Textbased browsers and search engine spiders will be able to read the alt attribute.
Speaking of search engines, the alt attribute can also help to make your page or at least
your image rank higher in search engine results pages. There is even speculation among
SEO professionals that putting your keywords in the alt text actually has more weight than
putting your keywords in the title or header tags. Also, image search services, such as
Google Images, Yahoo Image Search and Bing Images, use the alt attribute.
alt . .
.

alt alt .
:
1. alt
" " .
2. alt .
alt
. SEO alt
. Google
, Yahoo , Bing alt .

6.2 The width and height attributes

When inserting an image, it would be a good practice to specify the width and height of the
image. This way, the browser will know just how much space to leave for your image. This
means that even though your image does not load right away, the page will still be properly
laid out as if the image has already completely loaded.

It is also important to use the right proportions so that your image does not look distorted. For
example, if you have an image that is 200 pixels wide and 200 pixels high, specifying a width
and height of 200 pixels and 100 pixels respectively will result in the page showing a deformed
image.
.
. ,
.

. , 200 ,
200 200 100
.

6.3 Align your images

It is also important to align your images. For example, you can have an image displayed at
the center of the paragraph, or you could have it flushed to the right.
You could do this using the align attribute.
. ,
.
align .
● To align your images to the left, use <img align="left">
● To align your images to the right, use <img align="right">
● To align your images to the middle, use <img align="middle">
● To align your images to the top, use <img align="top">
● To align your images to the bottom, use <img align="bottom">

The align attribute for the <img> tag, however, has already been deprecated in HTML 4.01,
and if you are using HTML 5, it is not supported anymore.
You could still, however, use CSS to align your images by using the following syntax:

<img> align HTML 4.01 HTML 5


.
CSS .
<img style="float:right"> in order to align your image to the right.

6.4 Adding links to your images

Sometimes, you will want to use an image to link to another content. It could be another
page or perhaps you would want to give people a larger view of the image you have used
for your page.

. ,
.
You can add a link to your image by using this syntax:

<a href="page.html"><img src="image.jpg" alt="image with link" width="100" height="100"></a

You might also like