Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
62 views

Previous Next Chapter : What Is HTML?

The document provides an introduction to HTML (Hypertext Markup Language). It defines HTML as a markup language used to describe web pages using tags. It explains some common HTML tags like <html>, <body>, <h1>, and <p> and how they are used to structure a basic HTML document and web page. It also covers other important HTML concepts like headings, attributes, links, colors, and more. The overall purpose is to introduce the basic building blocks of HTML for creating web pages.

Uploaded by

uvs sahu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
62 views

Previous Next Chapter : What Is HTML?

The document provides an introduction to HTML (Hypertext Markup Language). It defines HTML as a markup language used to describe web pages using tags. It explains some common HTML tags like <html>, <body>, <h1>, and <p> and how they are used to structure a basic HTML document and web page. It also covers other important HTML concepts like headings, attributes, links, colors, and more. The overall purpose is to introduce the basic building blocks of HTML for creating web pages.

Uploaded by

uvs sahu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

HTML Introduction

« Previous Next Chapter »

Example

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Try it yourself »

What is HTML?
HTML is a language for describing web pages.

 HTML stands for Hyper Text Markup Language


 HTML is not a programming language, it is a markup language
 A markup language is a set of markup tags
 HTML uses markup tags to describe web pages

HTML Tags
HTML markup tags are usually called HTML tags

 HTML tags are keywords surrounded by angle brackets like <html>


 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 Start and end tags are also called opening tags and closing tags

HTML Documents = Web Pages

 HTML documents describe web pages


 HTML documents contain HTML tags and plain text
 HTML documents are also called web pages

The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display
them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content
of the page:
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph</p>

</body>
</html>

Example Explained

 The text between <html> and </html> describes the web page
 The text between <body> and </body> is the visible page content
 The text between <h1> and </h1> is displayed as a heading
 The text between <p> and </p> is displayed as a paragraph

HTML, which stands for HyperText Markup Language, is a markup language used to create web pages. The
web developer uses "HTML tags" to format different parts of the document. For example, you use HTML tags
to specify headings, paragraphs, lists, tables, images and much more.

HTML is a subset of Standard Generalized Markup Language (SGML) and is specified by the World Wide Web
Consortium (W3C).

What do I need to create HTML?

You don't need any special equipment or software to create HTML. In fact, you probably already have
everything you need. Here is what you need:

 Computer
 Text editor. For example, Notepad (for Windows), Pico (for Linux), or Simpletext (Mac). You could
use a HTML editor if you like but it's not needed.
 Web Browser. For example, Internet Explorer or Firefox.

When you create a web page you will usually do something like this:

1. Create an HTML file


2. Type some HTML code
3. View the result in your browser
4. Repeat the last 2 steps (if necessary)
5. The <!DOCTYPE... > element tells the browser which version of HTML the document is using.
6. The <html> element can be thought of as a container that all other tags sit inside (except for the
!DOCTYPE tag).
7. The <head> tag contains information that is not normally viewable within your browser (such as meta
tags, JavaScript and CSS), although the <title> tag is an exception to this. The content of the
<title> tag is displayed in the browser's title bar (right at the very top of the browser).
8. The <body> tag is the main area for your content. This is where most of your code (and viewable
elements) will go.
9. The <p> tag declares a paragraph. This contains the body text.

Headings

There is a special tag for specifying headings in HTML. There are 6 levels of headings in HTML ranging from
h1 for the most important, to h6 for the least important.

Typing this code:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with
more information about how the tag should appear or behave. Attributes consist of a name and a value
separated by an equals (=) sign.

Consider this example:

<body style="background-color:orange">

OK, we've already seen the body tag in previous lessons, but this time we can see that something extra has
been added to the tag - an attribute. This particular attribute statement, style="background-

color:orange", tells the browser to style the body element with a background color of orange.

Width

Here's another example of adding an attribute to an HTML tag:

<hr width="60%" />

This results in:


Alignment

You can align HTML elements to the left, right, or center:

<h3 align="left">Aligned left</h3>


<h3 align="center">Aligned center</h3>
<h3 align="right">Aligned right</h3>

This results in:

Aligned left

Aligned center

Aligned right

Foreground Color

To add color to an HTML element, you use style="color:{color}", where {color} is the color value.
For example:

<h3 style="color:blue">HTML Colors</h3>

This results in:

HTML Colors

Background Color

To add a background color to an HTML element, you use style="background-color:{color}",


where {color} is the color value. For example:

<h3 style="background-color:blue">HTML Colors</h3>

This results in:


HTML Colors

Border Color

To add a colored border to an HTML element, you use style="border:{width} {color} {style}",
where {width} is the width of the border, {color} is the color of the border, and {style} is the style of the
border. For example:

<h3 style="border:1px blue solid;">HTML Colors</h3>

This results in:

HTML Colors

Color Names

The most common methods for specifying colors are by using the color name or the hexadecimal value.
Although color names are easier to remember, the hexadecimal values and RGB values provides you with
more color options.

Hexadecimal values are a combination of letters and numbers. The numbers go from 0 - 9 and the letters go
from A to F. When using hexadecimal color values in your HTML/CSS, you preceed the value with a hash
(#). Although hexadecimal values may look a little weird at first, you'll soon get used to them.

There are 16 color names (as specified in the HTML 4.0 specification). The chart below shows these color
names and their corresponding hexadecimal value.

Links, otherwise known as hyperlinks, are defined using the <a> tag - otherwise known as the anchor

element.

To create a hyperlink, you use the a tag in conjunction with the href attribute (href stands for Hypertext
Reference). The value of the href attribute is the URL, or, location of where the link is pointing to.

Example HTML Code:

Visit the <a href="http://www.natural-environment.com/blog/">Natural


Environment Blog</a>

This results in:

Visit the Natural Environment Blog

Hypertext references can use absolute URLS, relative URLs, or root relative URLs.
absolute

This refers to a URL where the full path is provided. For example,
http://www.xyz.com/html/notes/index.cfm

relative

This refers to a URL where only the path, relative to the current location, is provided. For example,
if we want to reference the http://www.xyz.com/html/notes/index.cfm URL, and our current
location is http://www.xyz.com/html, we would use notes/index.cfm

root relative

This refers to a URL where only the path, relative to the domain's root, is provided. For example, if
we want to reference the http://www.xyz.com/html/notes/index.cfm URL, and the current location
is http://www.xyz.com/html, we would use /html/notes/index.cfm. The forward slash indicates the
domain's root. This way, no matter where your file is located, you can always use this method to
determine the path, even if you don't know what the domain name will eventually be.

Link Targets

You can nominate whether to open the URL in a new window or the current window. You do this with the
target attribute. For example, target="_blank" opens the URL in a new window.

The target attribute can have the following possible values:

_blank Opens the URL in a new browser window.

_self Loads the URL in the current browser window.

_parent Loads the URL into the parent frame (still within the current browser window). This is only
applicable when using frames.

_top Loads the URL in the current browser window, but cancelling out any frames. Therefore, if
frames were being used, they aren't any longer.

Example HTML Code:


Visit the <a href="http://www.natural-environment.com"
target="_blank">Natural Environment</a>

This results in:

Visit the Natural Environment

Named Anchors

You can make your links "jump" to other sections within the same page. You do this with named anchors.

To use named anchors, you need to create two pieces of code - one for the hyperlink (this is what the user
will click on), and one for the named anchor (this is where they will end up).

This page uses a named anchor. I did this by performing the steps below:

1. I created the named anchor first (where the user will end up)

Example HTML Code:

<h2>Link Targets<a name="link_targets"></a></h2>

2. I then created the hyperlink (what the user will click on). This is done by linking to the name of the
named anchor. You need to preceed the name with a hash (#) symbol.

Example HTML Code:

<a href="#link_targets">Link Targets</a>

This results in:

Link Targets

When you click on the above link, this page should jump up to the "Link Targets" section (above). You can
either use your back button, or scroll down the page to get back here.

You're back? Good, now lets move on to email links.

Email Links

You can create a hyperlink to an email address. To do this, use the mailto attribute in your anchor tag.
Example HTML Code:

<a href="mailto:king_kong@xyz.com">Email King Kong</a>

This results in:

Email King Kong

Clicking on this link should result in your default email client opening up with the email address already filled
out.

You can go a step further than this. You can auto-complete the subject line for your users, and even the
body of the email. You do this appending subject and body parameters to the email address.

Example HTML Code:

<a href="mailto:king_kong@xyz.com?subject=Question&body=Hey there">Email King


Kong</a>

This results in:

Email King Kong

Base href

You can specify a default URL for all links on the page to start with. You do this by placing the base tag (in

conjunction with the href attribute) in the document's head.

Example HTML Code:

<head>
<base url="http://www.xyz.com">
</head>

Images make up a large part of the web - most websites contain images. HTML makes it very easy for you
to embed images into your web page.

To embed an image into a web page, the image first needs to exist in either .jpg, .gif, or .png format. You
can create images in an image editor (such as Adobe Photoshop) and save them in the correct format.

Once you've created an image, you need to embed it into your web page. To embed the image into your
web page, use the <img /> tag, specifying the actual location of the image.
Example of Image Usage

HTML Code:

<img src="http://www.quackit.com/pix/smile.gif" width="100" height="100"


alt="Smile" />

This results in:

The img above contains a number of attributes. These attributes tell the browser all about the image and
how to display it. Here's an explanation of these attributes:

src Required attribute. This is the path to the image. It can be either an absolute path, or a
relative path (remember these terms from our last lesson?)

width Optional attribute (but recommended). This specifies the width to display the image. If the
actual image is wider, it will shrink to the dimensions you specify here. Likewise, if the
actual image is smaller it will expand to your dimensions. I don't recommend specifying a
different size for the image, as it will lose quality. It's better to make sure the image is the
correct size to start with.

height Optional attribute (but recommended). This specifies the height to display the image. This
attribute works similar to the width.

alt Alternate text. This specifies text to be used in case the browser/user agent can't render the
image.

Image Alignment
You can determine how your images will be aligned, relative to the other content on the page (such as a
paragraph of text). You do this using the align attribute.

HTML Code:

<p>
<img src="http://www.quackit.com/pix/smile.gif"
width="100" height="100" alt="Smile" align="right"/>
Here is a paragraph of text to demonstrate HTML images and how
they can be aligned to the right of a paragraph (or paragraphs)
if you so desire.</p> </p>This can be used to produce
some nice layout effects, especially if you have a lot of text,
and it runs right past the image.</p><p> Otherwise,
the image will just hang below the text and may look funny.</p>

This results in:

Here is a paragraph of text to demonstrate HTML images and how they can be aligned to
the right of a paragraph (or paragraphs) if you so desire.

This can be used to produce some nice layout effects, especially if you have a lot of text,
and it runs right past the image.

Otherwise, the image will just hang below the text and may look funny.

Image Links

You can make your images "clickable" so that when a user clicks the image, it opens another URL. You do
this by simply wrapping the image with hyperlink code.

HTML Code:

<a href="http://www.quackit.com/html/tutorial">
<img src="http://www.quackit.com/pix/smile.gif"
width="100" height="100" alt="Smile" />
</a>

This results in:


Removing the Border

You might notice that this has created a border around the image. This is default behaviour for most
browsers. If you don't want the border, specify border="0".

HTML Code:

<a href="http://www.quackit.com/html/tutorial">
<img src="http://www.quackit.com/pix/smile.gif"
width="100" height="100" alt="Smile" border="0" />
</a>

This results in:

Creating Images

Basic table tags

In HTML, you create tables using the table tag, in conjunction with the tr and td tags. Although there are
other tags for creating tables, these are the basics for creating a table in HTML.

HTML Code:

<table border="1">
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
</table>

This results in:

Table cell 1 Table cell 2


You'll notice that we added a border attribute to the table tag. This particular attribute allows us to
specify how thick the border will be. If we don't want a border we can specify 0 (zero). Other common
attributes you can use with your table tag include width, width, cellspacing and cellpadding.

You can also add attributes to the tr and td tags. For example, you can specify the width of each table cell.

Widths can be specified in either pixels or percentages. Specifying the width in pixels allows you to specify
an exact width. Percentages allows the table to "grow" or "shrink" depending on what else is on the page
and how wide the browser is.

HTML Code:

<table border="1" cellpadding="5" cellspacing="5" width="100%">


<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>

This results in:

Table cell 1 Table cell 2

Table Headers

Many tables, particularly those with tabular data, have a header row or column. In HTML, you can use the
th tag.

Most browsers display table headers in bold and center-aligned.

HTML Code:

<table border="1" cellpadding="5" cellspacing="5" width="100%">


<tr>
<th>Table header</th>
<th>Table header</th>
</tr>
<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>

This results in:


Table header Table header

Table cell 1 Table cell 2

Colspan

You can use the colspan attribute to make a cell span multiple columns.

HTML Code:

<table border="1" cellpadding="5" cellspacing="5" width="100%">


<tr>
<th colspan="2">Table header</th>
</tr>
<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>

This results in:

Table header

Table cell 1 Table cell 2

Rowspan

Rowspan is for rows just what colspan is for columns (rowspan allows a cell to span multiple rows).

HTML Code:

<table border="1" cellpadding="5" cellspacing="5" width="100%">


<tr>
<th rowspan="2">Table header</th><td>Table cell 1
</tr>
<tr>
<td>Table cell 2</td>
</tr>
</table>
This results in:

Table cell 1

Table header

Table cell 2

Color

You can apply color to your table using CSS. Actually, you can apply any applicable CSS property to your
table - not just colors. For example, you can use CSS to apply width, padding, margin, etc

HTML Code:

<table border="1" cellpadding="5" cellspacing="5" width="100%">


<tr>
<th style="color:blue;background-color:yellow;" rowspan="2">Table
header</th><td>Table cell 1
</tr>
<tr>
<td>Table cell 2</td>
</tr>
</table>

This results in:

Table cell 1

Table header

Table cell 2

You might also like