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 tags normally come in pairs like and
* 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:
My First Heading
My first paragraph.
Example Explained
* The text between and describes the web page
* The text between and is the visible page content
* The text between
and
is displayed as a heading
* The text between
and
is displayed as a paragraph
What You Need
* You don't need an HTML editor
* You don't need a web server
* You don't need a web site
Editing HTML
In this tutorial we use a plain text editor (like Notepad) to edit HTML. We believe this is the best way to learn HTML.
However, some web developers prefer using HTML editors like FrontPage or Dreamweaver, instead of a plain text editor.
HTML Headings
HTML headings are defined with the
to
tags.
This is a heading
This is a heading
This is a heading
HTML Paragraphs
HTML paragraphs are defined with the
tag.
Example
This is a paragraph.
This is another paragraph.
HTML Elements
An HTML element is everything from the start tag to the end tag:
Start tag * Element content End tag *
This is a paragraph
* The start tag is often called the opening tag. The end tag is often called the closing tag.
HTML Element Syntax
* An HTML element starts with a start tag / opening tag
* An HTML element ends with an end tag / closing tag
* The element content is everything between the start and the end tag
* Some HTML elements have empty content
* Empty elements are closed in the start tag
* Most HTML elements can have attributes
Nested HTML Elements
Most HTML elements can be nested (can contain other HTML elements).
HTML documents consist of nested HTML elements.
This is my first paragraph.
The example above contains 3 HTML elements.
HTML Example Explained
- Theelement:
This is my first paragraph.
The
element defines a paragraph in the HTML document.
The element has a start tag
and an end tag
.
The element content is: This is my first paragraph.
- The element:
This is my first paragraph.
The element defines the body of the HTML document.
The element has a start tag and an end tag .
The element content is another HTML element (a p element).
- The element:
This is my first paragraph.
The element defines the whole HTML document.
The element has a start tag and an end tag .
The element content is another HTML element (the body element).
Don't Forget the End Tag
Some HTML elements will be displayed correctly even if you forget the end tag:
This is a paragraph
This is a paragraph
The example above will work in most browsers, but don't rely on it. Forgetting the end tag can produce unexpected results or errors.
Empty HTML Elements
HTML elements with no content are called empty elements.
is an empty element without a closing tag (the
tag defines a line break).
HTML tags are not case sensitive: means the same as
. Many web sites use uppercase HTML tags.
HTML Attributes
* HTML elements can have attributes
* Attributes provide additional information about an 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 tag. The link address is specified in the href attribute:
Example
Complete HTML Reference
Below is a list of some attributes that are standard for most HTML elements:
Attribute Value Description
class classname Specifies a classname for an element
id id Specifies a unique id for an element
style style_definition Specifies an inline style for an element
title tooltip_text Specifies extra information about an
element (displayed as a tool tip)
HTML Comments
Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.
Comments are written like this:
Example
HTML Line Breaks
Use the
tag if you want a line break (a new line) without starting a new paragraph:
Example
This is
a para
graph with line breaks
HTML Text Formatting Tags
Tag Description
Defines bold text
Defines big text
Defines emphasized text
Defines italic text
Defines small text
Defines strong text
Defines subscripted text
Defines superscripted text
HTML Style Example - Background Color
The background-color property defines the background color for an element:
Example
This is a heading
This is a paragraph.
HTML Style Example - Font, Color and Size
The font-family, color, and font-size properties defines the font, color, and size of the text in an element:
Example
A heading
A paragraph.
Attributes Description
and
Defines underlined text
align Defines the alignment of text
bgcolor Defines the background color
color Defines the text color
HTML Unordered Lists
An unordered list starts with the
- tag.The list items are marked with bullets (typically small black circles).
- Coffee
- Milk
How the HTML code above looks in a browser:- Coffee
- Milk
HTML Ordered ListsAn ordered list starts with the- tag.The list items are marked with numbers.
- Coffee
- Milk
How the HTML code above looks in a browser:1. Coffee2. MilkHTML Definition ListsA definition list is a list of items, with a description of each item.The- tag defines a definition list.
The- tag is used in conjunction with
- (defines the item in the list) and
- (describes the item in the list):
- Coffee
- - black hot drink
- Milk
- - white cold drink
tag. Each list item starts with the
tag. Each list item starts with the
How the HTML code above looks in a browser:
Coffee
- black hot drink
Milk
- white cold drink
HTML List Tags
Tag Description
- Defines an ordered list
- Defines a list item
- Defines a definition list
- Defines an item in a definition list
- Defines a description of an item in a definition list
HTML Hyperlinks (Links)A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.When you move the cursor over a link in a Web page, the arrow will turn into a little hand.Links are specified in HTML using the tag.1. To create a link to another document, by using the href attribute2. To create a bookmark inside a document, by using the name attributeHTML Link SyntaxThe HTML code for a link is simple. It looks like this:The href attribute specifies the destination of a link.ExampleHTML Links - The target AttributeThe target attribute specifies where to open the linked document.The example below will open the linked document in a new browser window:ExampleHTML Links - The name AttributeThe name attribute specifies the name of an anchor.The name attribute is used to create a bookmark inside an HTML document.Bookmarks are not displayed in any special way. They are invisible to the reader.ExampleA named anchor inside an HTML document:Create a link to the "Useful Tips Section" inside the same document:Or, create a link to the "Useful Tips Section" from another page:Visit the Useful Tips SectionHTML TheTag and the Src Attribute
In HTML, images are defined with theTheTo display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.Syntax for defining an image:The URL points to the location where the image is stored. An image named "boat.gif", located in the "images" directory on "www.google.com" has the URL: http://www.google.com/images/boat.gif.The browser displays the image where theHTML The Alt AttributeThe required alt attribute specifies an alternate text for an image, if the image cannot be displayed.The value of the alt attribute is an author-defined text:
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).HTML TablesTables are defined with thetag.
A table is divided into rows (with thetag), and each row is divided into data cells (with the tag). td stands for "table data," and holds the content of a data cell. A tag can contain text, links, images, lists, forms, other tables, etc. Table Examplerow 1, cell 1 row 1, cell 2
Defines an unordered list
How the HTML code above looks in a browser:
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
HTML Tables and the Border Attribute
If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show.
To display a table with borders, specify the border attribute:
HTML Table Headers
Header information in a table are defined with the tag.
The text in a th element will be bold and centered.
How the HTML code above looks in a browser:
Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
HTML Table Tags
Tag Description
Groups the header content in a table
Groups the body content in a table
Groups the footer content in a table
Example :
HTML Forms
HTML forms are used to pass data to a server.
A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
The
....
input elements
....
HTML Forms - The Input Element
The most important form element is the input element.
The input element is used to select user information.
An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more.
The most used input types are described below.
Text Fields
defines a one-line input field that a user can enter text into:
First name:
Last name:
Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.
Password Field
defines a password field:
Password:
Note: The characters in a password field are masked (shown as asterisks or circles).
Radio Buttons
defines a radio button. Radio buttons let a user select ONLY ONE one of a limited number of choices:
Male
Female
Checkboxes
defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices.
I have a bike
I have a car
Submit Button
defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:
Username:
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_action.asp". The page will show you the received input.
HTML Form Tags
Tag Description
Defines an input control
Entities
< is the same as
> is the same as >
© is the same as ©
Other Elements
Text quoted from a source.
Written by google.com
Address: Sunshine College
Phone: +12 34 56 78
Comments
Post a Comment