Introduction to HTML http://www.w3schools.com/html/html

Download Report

Transcript Introduction to HTML http://www.w3schools.com/html/html

Ch2: Introduction to HTML5

How does the WWW work?

• Web information is stored in documents called Web pages .

• Web pages are files stored on computers called Web servers .

• Computers reading the Web pages are called Web clients .

How does the browser fetch the pages?

• • • A browser fetches a Web page from a server by a request . A request is a standard HTTP request containing a page address . A page address looks like this: http://www.someone.com/home.htm

.

How does the browser display the pages?

• All Web pages contain instructions for display • The browser displays the page by reading these instructions. • The most common display instructions are called HTML tags. • HTML tags look like this

This is a Paragraph

.

Who is making the Web standards?

• • • • • • The Web standards are not made up Microsoft. by Firefox or Chrome or The rule-making body of the Web is the W3C . W3C stands for the World Wide Web Consortium . W3C puts together specifications for Web standards . The most essential Web standards are HTML, CSS and XML. The latest HTML standard is HTML 5 .

What is an HTML File?

• • • • • • HTML stands for H yper T ext M arkup L anguage An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display page the An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor A HTML file is also called HTML document .

A Simple Example

This is my first homepage.

What is HTML Tag?

• • • • • • • HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters < and > The surrounding characters are called angle brackets 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 The text between the start and end tags is the element content HTML tags are not case sensitive , means the same as

A Simple Example

Title of page This is my first homepage. This text is bold

Example Explained

• • • • • The first tag in your HTML document is . This tag tells your browser that this is the start of an HTML document. The last tag in your document is . This tag tells your browser that this is the end of the HTML document. tells your browser that the document is an html5 document.

The text between the tag and the tag is header information. Header information is not displayed in the browser window.

The text between the tags is the title of your document. The title is displayed in your browser's caption.</p> <p>The text between the <body> tags is the text that will be displayed in your browser.</p> <p>The text between the <b> and </b> tags will be displayed in a bold font.</p> <a id="p11" href="#"></a> <h2>What is HTML element?</h2> <p>This is an HTML element : <b> This text is bold </b> • • • • • • An HTML element starts with a</p> <p><b>start tag </b></p> <p>and</p> <p><b>end tag .</b></p> <p>Name of the HTML element follows the initial < bracket = b ; The</p> <p><b>element content</b></p> <p>text is bold .</p> <p>is everything between the tags = This Some HTML elements have</p> <p><b>empty content .</b></p> <p>void elements are <b>closed in the start tag</b>.</p> <p>An Example is the line break tag <br /> (new line) .</p> <a id="p12" href="#"></a> <p>•</p> <h2>Nested HTML Elements</h2> <p>Most HTML elements can contain other HTML elements.</p> <p><!DOCTYPE html> <html> <head> <title> Title of page This is my first homepage. This text is bold

HTML Attributes

This is my first homepage. This is my first homepage. Name of the attribute : bgcolor; Value of the attribute : red.

Both double style quotes and single style quotes are allowed.

HTML Attributes

• Attributes provide

additional information

about an element • Attributes are always specified in

the start tag

• Attributes come in name/value pairs like:

attribute_name = "value"

Notes: • Attribute values should always be enclosed in quotes.

• Double or Single style quotes “ or ‘ can be used. • Attribute names and attribute values are case-insensitive.

HTML Headings

Headings

Headings are defined with the

to

tags.

defines the largest heading.

defines the smallest heading.

This is a heading

This is a heading

This is a heading

This is a heading

This is a heading
This is a heading
HTML automatically adds an extra blank line before and after a heading.

HTML Code

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6
Its Output

This is heading 1 This is heading 2

This is heading 3

This is heading 4 This is heading 5 This is heading 6

HTML Paragraphs

Paragraphs

Paragraphs are defined with the

tag.

This is a paragraph

HTML automatically adds an extra blank line before and after a paragraph .

HTML Code

HTML Paragraphs

Its Output This is paragraph I.

This is paragraph II.

This is paragraph III.

This is paragraph I.

This is paragraph II.

This is paragraph III.

HTML Line Breaks

HTML Line Breaks

The
tag is used when you want to end a line, but don't want to start a new paragraph. The < br / > tag forces a line break wherever you place it.

This
is a para
graph with line breaks

The br element is an void element . It has no closing tag.

HTML Code

HTML Line Breaks

Its Output This is a para graph with line breaks

This is
a para
graph with line breaks

HTML Lines

HTML Lines

The

element is a void element . It has no closing tag.

The

tag creates a horizontal line in an HTML page.

HTML Lines

HTML Code Its Output

The hr tag defines a horizontal rule:

This is a paragraph

This is a paragraph

This is a paragraph

The hr tag defines a horizontal rule: This is a paragraph This is a paragraph This is a paragraph

HTML Comments

Comments in HTML

An example of comment tag.

The start of the comment is:

HTML Code

HTML Comments

Its Output This is a regular paragraph

This is a regular paragraph

HTML Formatting

HTML Code

HTML Formatting

Its Output

This text is bold

This text is italic

This is subscript and superscript

This text is bold

This text is italic

This is subscript and superscript

HTML Images

HTML Images

•

tag is used to insert images in webpages.

• •

tag is empty (no closing tag) Syntax for inserting image

“text”/

src

attribute is used to specify the URL (location of the image).

alt

attribute specifies an alternate text that is used if the image can’t be displayed. This is required in HTML5.

HTML Images – src & alt attributes

An image from folder

Google Chrome

An image from internet

W3Schools.com An image from folder An image from internet

HTML Images – height & width attributes

• • height=“height_value” attribute is used to set the height of the image.

width=“width_value” attribute is used to set the width of the image.

An image from internet

W3Schools.com

HTML Links

HTML Link and href attributes

If you set the target attribute to "_blank", the link will open in a new browser window HTML Code Visit Google
Visit Google Open Google home page in the same window Its Output Visit Google Visit Google Open Google home page in a new window

HTML Link and href attributes

Using links to send e-mails:

Links can be used to link to email accounts not only web pages HTML code Click here to email John Click here to email John Output

HTML Link and href attributes

Using images as links:

W3Schools.com Pressing the image will lead to the web page

HTML Link and href attributes

Linking to files:

HTML5 video tutorial
Kuwait national anthem link in a media folder on the webserver

•

Internal Linking

Links can be used to jump to different locations on the same page.

Internal linking example





Go to the top of the page

HTML Lists

HTML Lists

An ordered list: 1. Jehad 2. Helal 3. Kassem An unordered list: • • • Apple Orange Dates

Note:

Inside a list item you can put text, line breaks, images, links, other lists, etc.

An Ordered List:

  1. Coffee
  2. Tea
  3. Milk

HTML ordered Lists

An Ordered List: 1. Coffee 2. Tea 3. Milk

Numbered list:

  1. Apples
  2. Oranges

Letters list:

  1. Apples
  2. Oranges

Lowercase letters list:

  1. Apples
  2. Oranges

Roman numbers list:

  1. Apples
  2. Oranges

Lowercase Roman numbers list:

  1. Apples
  2. Oranges

More HTML ordered Lists

Numbered list: 1. Apples 2. Oranges Uppercase Letters list: A. Apples B. Oranges Lowercase letters list: a. Apples b. Oranges Uppercase Roman numbers list: I.

Apples II. Oranges Lowercase Roman numbers list: i.

Apples ii. Oranges

An Unordered List:

  • Coffee
  • Tea
  • Milk

HTML Unordered Lists

An Unordered List: • Coffee • Tea • Milk

Disc bullets list:

  • Apples
  • Oranges

Circle bullets list:

  • Apples
  • Oranges

Square bullets list:

  • Apples
  • Oranges

More HTML Unordered Lists

Disc bullets list: • Apples • Oranges Circle bullets list: o Apples o Oranges Square bullets list: ■ Apples ■ Oranges

Nested Lists

Numbered list:

  1. Apples:
    • Green apples
    • Red apples
  2. Oranges

Numbered list: 1. Apples: • Green apples • Red apples 2. Oranges

HTML Tables

HTML Tables

•

element defines an HTML table.

• A table can be split into three distinct sections: • Head (< thead> element) • Table titles • Column headers • Body (< tbody> element) • Primary table data • Foot (< tfoot> element) • Calculation results • Footnotes • Above body section in the code, but displays at the bottom in the page • Element < caption> describes the table’s content • The text inside the

tag is rendered above the table in most browsers

Table caption Table head Table body Table foot HTML Table Example

HTML Tables – table & caption elements

Table Caption

Price of Fruit
Fruit Price
Total $3.75
Apple $0.25
Orange $0.50
Banana $1.00
Pineapple $2.00

HTML Tables – thead & tfoot elements

Table Caption

Price of Fruit
Fruit Price
Total $3.75
Apple $0.25
Orange $0.50
Banana $1.00
Pineapple $2.00

HTML Tables -

• You can merge data cells with the rowspan attributes and colspan • The values of these attributes specify the number of rows or columns occupied by the cell • Can be placed inside any data cell

or table header cell

HTML tables - Rowspan

NamePaul Deitel
Telephone555-4321
555-1234

Name Telephone

Paul Deitel 555-4321 555-1234

NameTelephone
Paul Deitel 555-4321 555-1234

HTML tables - colspan

Paul Deitel

Name

555-4321

Telephone

555-1234

HTML Tables – cellpadding attribute

 Use cellpadding attribute to set the white space between the cell content and its borders.

First Row
Second Row

HTML Tables – cellspacing attribute

 Use cellspacing attribute to increase the distance between the cells.

First Row
Second Row

HTML Tables – align attribute

align="left" >Item
2010
Clothes $241.10
Food $30.00

Special characters in HTML

• Some characters can not be directly shown in an HTML document. Either because these characters are reserved for the HTML code or because they are not on the keyboard.

if x < 10 then increment x by 1

• Results in a syntax error HTML provides Character entity references for represnting these special characters.

if x < 10 then increment x by 1

Doesn’t result in a syntax error

Special characters in HTML

Description

> <

Symbol HTML5 character entities

‘ & “

Other common character entities

ampersand apostrophe greater-than less-than quote © ¼ ½ ¾ ™ non-breaking space copyright fraction 1/4 fraction 1/2 fraction 3/4 trademark

Character entity reference

& ' > < "   © ¼ ½ ¾ ™

HTML Forms

HTML Forms  HTML provides the ability for collecting information or data from users using

web forms

.

 Forms have many different uses like:  Sending e-mail    creating user accounts providing feedback issuing search queries  forms are used to pass and/or retrieve data to/from a server.

How does a web form work?

1.

User visits a web page that contains a form.

Web page containing form

How does a web form work?

2.

• • User fills and submits the form.

The form contains the address of the web server.

When the user clicks the submit button the form will automatically be transmitted to the server.

Filled form submitted to web server

How does a web form work?

3.

Web server processes the data on the form using a

form processor script

, and returns the response back to the user.

Response page Script file

HTML Forms  Forms contain visual components, that users interact with such as  Buttons, text fields, checkboxes, radio-buttons, drop-down menus and more.

 Forms may also contain nonvisual components, called

hidden inputs

.   Hidden inputs are used to store any data that needs to be sent to the server, but is not entered by the user.

Hidden inputs can help the server to sort out the different forms submitted to the web server.

HTML Forms  A form begins with the < form> element  Attribute method specifies how the form’s data is sent to the web server. (either “post” or “get”).

 The action attribute of the form element specifies the URL of a script on the Web server to which the form data will be sent.

input elements

HTML Forms – input element  The < input> element is the most important element on a form.

 The < input> element is used to create the different input fields on the form (buttons, textareas, checkboxes...)  An input element can vary depending on the type=“” attribute.

 Users specify their data values using these input fields.  The values in these input elements are provided to the script that processes the form.

HTML Forms – Text Fields

Text Field