Scribd
Upload
115 views

What Is HTML?: My First Heading My First Paragraph

HTML is a markup language used to define the structure and layout of web pages. HTML uses tags like <h1> and <p> to mark text as headings or paragraphs. Tags usually come in pairs with an opening and closing tag. When a web browser loads an HTML file, it does not display the tags but uses them to interpret the content and structure of the page. Common HTML elements include headings, paragraphs, links, images, lists, tables, forms, and more.

Uploaded by

Kevin Dass
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
115 views

What Is HTML?: My First Heading My First Paragraph

HTML is a markup language used to define the structure and layout of web pages. HTML uses tags like <h1> and <p> to mark text as headings or paragraphs. Tags usually come in pairs with an opening and closing tag. When a web browser loads an HTML file, it does not display the tags but uses them to interpret the content and structure of the page. Common HTML elements include headings, paragraphs, links, images, lists, tables, forms, and more.

Uploaded by

Kevin Dass
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

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
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

Editing HTML: professional web developers often prefer HTML editors like FrontPage
or Dreamweaver, instead of writing plain text.
HTM or HTML Extension?

When you save an HTML file, you can use either the .htm or the .html extension. We use .htm in our examples. It
is a habit from the past, when the software only allowed three letters in file extensions.
With new software it is perfectly safe to use .html.

HTML links are defined with the <a> tag.


Example

<a href="http://www.w3schools.com">This is a link</a>


HTML images are defined with the <img> tag.
Example

<img src="w3schools.jpg" width="104" height="142" />

Empty HTML Elements


HTML elements without content are called empty elements. Empty elements can be closed in the start tag.
<br> is an empty element without a closing tag (it defines a line break).
In XHTML, XML, and future versions of HTML, all elements must be closed.
Adding a slash to the start tag, like <br />, is the proper way of closing empty elements, accepted by HTML,
XHTML and XML.
Even if <br> works in all browsers, writing <br /> instead is more future proof.

HTML Tip: Use Lowercase Tags


HTML tags are not case sensitive: <P> means the same as <p>. Plenty of web sites use uppercase HTML
tags in their pages.

HTML Attributes
Attributes provide additional information about HTML elements.

HTML Attributes
• HTML elements can have attributes
• Attributes provide additional information about the element
• Attributes are always specified in the start tag
• Attributes come in name/value pairs like: name="value

Attribute Example
HTML links are defined with the <a> tag. The link address is provided as an attribute:
Example

<a href="http://www.w3schools.com">This is a link</a>

Always Quote Attribute Values


Attribute values should always be enclosed in quotes.
Double style quotes are the most common, but single style quotes are also allowed.
In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single
quotes:
name='John "ShotGun" Nelson'

HTML Tip: Use Lowercase Attributes


Attribute names and attribute values are case-insensitive.

HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the largest heading. <h6> defines the smallest heading.
Headings Are Important
Use HTML headings for headings only. Don't use headings to make text BIG or bold.
Search engines use your headings to index the structure and content of your web pages.
Since users may skim your pages by its headings, it is important to use headings to show the document
structure.
H1 headings should be used as main headings, followed by H2 headings, then less important H3 headings,
and so on.

HTML Rules (Lines)


The <hr /> tag is used to create an horizontal rule (line).
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

HTML Comments
<!-- This is a comment -->

HTML Paragraphs
Paragraphs are defined with the <p> tag
Example

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

HTML Line Breaks


Use the <br /> tag if you want a line break (a new line) without starting a new paragraph:
Example

<p>This is<br />a para<br />graph with line breaks</p>

HTML Output - Useful Tips


You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create
different results.
With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.
The browser will remove extra spaces and extra lines when the page is displayed. Any number of lines count
as one space, and any number of spaces count as one space.

HTML Styles
The style attribute is a new HTML attribute. It introduces CSS to HTML.

HTML Style Examples


Background Color
<body style="background-color:yellow">

Font Family, Color and Size


<p style="font-family:courier new; color:red; font-size:20px">

Text Alignment
<h1 style="text-align:center">

Hyperlinks, Anchors, and Links


In web terms, a hyperlink is a reference (an address) to a resource on the web.
Hyperlinks can point to any resource on the web: an HTML page, an image, a sound file, a movie, etc.
An anchor is a term used to define a hyperlink destination inside a document.
The HTML anchor element <a>, is used to define both hyperlinks and anchors.
We will use the term HTML link when the <a> element points to a resource, and the term HTML anchor
when the <a> elements defines an address inside a document..

The href Attribute


The href attribute defines the link "address".
This <a> element defines a link to W3Schools:

<a href="http://www.w3schools.com/">Visit W3Schools!</a>

HTML Images
The Alt Attribute
The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an
author-defined text:

<img src="boat.gif" alt="Big Boat" />

The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The
browser will then display the alternate text instead of the image. It is a good practice to include the "alt"
attribute for each image on a page, to improve the display and usefulness of your document for people who
have text-only browsers.

HTML Tables

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

How it looks in a browser:


row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Headings in a Table
Headings in a table are defined with the <th> tag.

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How it looks in a browser:


Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

HTML Lists
Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically small black circles).
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Here is how it looks in a browser:


• Coffee
• Milk

Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Here is how it looks in a browser:


1. Coffee
2. Milk
HTML Forms and Input
Forms
A form is an area that can contain form elements.
Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-
down menus, radio buttons, checkboxes, etc.) in a form.
A form is defined with the <form> tag

Input
The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most
commonly used input types are explained below.

Text Fields
Text fields are used when you want the user to type letters, numbers, etc. in a form.

<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>

How it looks in a browser:


Top of Form

First name:

Last name:

Bottom of Form
Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20
characters by default.

Radio Buttons
Radio Buttons are used when you want the user to select one of a limited number of choices.

<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>

How it looks in a browser:


Top of Form
Male

Female

Bottom of Form
Note that only one option can be chosen.

Checkboxes
Checkboxes are used when you want the user to select one or more options of a limited number of choices.

<form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
</form>

How it looks in a browser:


Top of Form

I have a bike:

I have a car:

I have an airplane:

Bottom of Form

The Form's Action Attribute and the Submit Button


When the user clicks on the "Submit" button, the content of the form is sent to the server. The form's action
attribute defines the name of the file to send the content to. The file defined in the action attribute usually
does something with the received input.

<form name="input" action="html_form_submit.asp" method="get">


Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

How it looks in a browser:


Top of Form
Submit

Username:

Bottom of Form
If you type some characters in the text field above, and click the "Submit" button, the browser will send
your input to a page called "html_form_submit.asp". The page will show you the received input.

You might also like