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
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
The text between the
The text between the and tags will be displayed in a bold font.
What is HTML element?
This is an HTML element : This text is bold • • • • • • An HTML element starts with a
start tag
and
end tag .
Name of the HTML element follows the initial < bracket = b ; The
element content
text is bold .
is everything between the tags = This Some HTML elements have
empty content .
void elements are closed in the start tag.
An Example is the line break tag
(new line) .
•
Nested HTML Elements
Most HTML elements can contain other HTML elements.
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.
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 OutputThis 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
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 paragraphHTML 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
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
An image from internet
An image from folder An image from internetHTML 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
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 GoogleVisit 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 OutputHTML Link and href attributes
Using images as links:
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:
- Coffee
- Tea
- Milk
HTML ordered Lists
An Ordered List: 1. Coffee 2. Tea 3. Milk
Numbered list:
Letters list:
Lowercase letters list:
Roman numbers list:
Lowercase Roman numbers list:
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:
Circle bullets list:
Square bullets list:
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:
Numbered list: 1. Apples: • Green apples • Red apples 2. Oranges
HTML Tables
HTML Tables
•