Lesson 1.2 HTML

Lesson 1.
2: HTML
What is HTML?
HTML is a markup language for
describing web documents (web pages).
HTML stands for Hyper Text Markup

Language
A markup language is a set of markup
tags
HTML documents are described by
HTML tags
Each HTML tag describes different
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
HTML cont.
The <!DOCTYPE html> declaration
defines this document to be HTML5
The text between <html> and

</html> describes an HTML document
The text between <head> and

</head> provides information about
the document
HTML cont.
The text between <title> and </title>
provides a title for the document
The text between <body> and </body>

describes the visible page content
The text between <h1> and </h1> describes

a heading
The text between <p> and </p> describes a

paragraph
HTML Tags
HTML tags are keywords (tag names)
surrounded by angle brackets:
<tagname>content goes
here...</tagname>
HTML Tags cont.
HTML tags normally come in pairs like
<p> and </p>
The first tag in a pair is the start tag,

the second tag is the end tag
The end tag is written like the start tag,

but with a forward slash inserted
before the tag name
Web Browsers
The purpose of a web browser
(Chrome, IE, Firefox, Safari) is to read
HTML documents and display them.
The browser does not display the

HTML tags, but uses them to
determine how to display the
document.
Web Browsers cont.
HTML Page Structure
Below is a visualization of an HTML page structure:
HTML Page Structure
cont.
Only the <body> section (the white
area above) is displayed in a
browser.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration

represents the document type, and
helps the browser to display a web
page correctly.
It must only appear once, at the top

of the page (before any HTML tags).
The <!DOCTYPE>
Declaration cont.
There are different document types. To
display a web page correctly, the browser
must know both type and version.
The doctype declaration is not case

sensitive.
<!DOCTYPE html>
<!doctype HTML>
HTML Versions
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
HTML Editors
Web pages can be created and
modified by using professional HTML
editors.
Simple text editor like Notepad (PC) or

TextEdit (Mac).
We believe using a simple text editor

is a good way to learn HTML.
HTML Headings
Headings are defined with the <h1>
to <h6> tags.
<h1> defines the most important

heading.
<h6> defines the least important
heading.
HTML Headings cont.
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>

</body>
</html>
HTML Horizontal Rules
The <hr> tag defines a thematic
break in an HTML page, and is most
often displayed as a horizontal rule.
HTML Horizontal Rules
cont.
<!DOCTYPE html>
<html>
<body>

<p>This is some text.</p>
<hr>

<p>This is some other text.</p>
<hr>

<p>This is some other text.</p>
</body>
</html>
The HTML <head> Element
The HTML <head> element has nothing to
do with HTML headings.
The <head> element is a container for

metadata. HTML metadata is data about the
HTML document. Metadata is not displayed.
The <head> element is placed between the

<html> tag and the <body> tag:
The HTML <head>
Element cont.
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
</head>
<body>
<p>The HTML head element contains meta data.</p>

<p>Meta data is data about the HTML document.</p>
</body>
</html>
HTML Paragraphs
The HTML <p> element defines a
paragraph
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Display
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 any extra spaces and

extra lines when the page is displayed
HTML Display cont.
<!DOCTYPE html>
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of the browser window.
If you resize the browser window, the number of lines in this paragraph will change.
</p>
</body>
HTML Line Breaks
The HTML <br> element defines a
line break.
Use <br> if you want a line break (a

new line) without starting a new
paragraph
<p>This is<br>a paragraph<br>with

line breaks.</p>
HTML Line Breaks cont.
<!DOCTYPE html>
<html>
<body>
<p>This is<br>a paragraph<br>with line

breaks</p>
</body>
</html>
The Poem Problem
<!DOCTYPE html>
<html>
<body>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
Oh, bring back my Bonnie to me.
</p>
</body>
</html>
The Poem Problem cont.
The HTML <pre> Element
The HTML <pre> element defines

preformatted text.
The text inside a <pre> element is

displayed in a fixed-width font
(usually Courier), and it preserves
both spaces and line breaks
The HTML <pre>
Element cont.
<!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
My Bonnie lies over the sea.
Oh, bring back my Bonnie to me.

</pre>
</body>
</html>
The HTML Style Attribute
Setting the style of an HTML element,
can be done with the style attribute.
The HTML style attribute has the

following syntax
<tagname style="property:value;">
Note: The property is a CSS property. The value is a

CSS value.
HTML Background Color
The background-color property
defines the background color for an
HTML element.
This example sets the background

color for a page to powderblue
HTML Background Color
cont.
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML Text Color
The color property defines the text
color for an HTML element
HTML Text Color cont.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>
</body>
</html>
HTML Fonts
The font-family property defines the
font to be used for an HTML element
HTML Fonts cont.
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">This is a
heading</h1>
<p style="font-family:courier;">This is a
paragraph.</p>
</body>
</html>
HTML Text Size
The font-size property defines the
text size for an HTML element
HTML Text Size cont.
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">This is a
heading</h1>
<p style="font-size:160%;">This is a
paragraph.</p>
</body>
</html>
HTML Text Alignment
The text-align property defines the
horizontal text alignment for an
HTML element
HTML Text Alignment cont.
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered
Heading</h1>
<p style="text-align:center;">Centered
paragraph.</p>
</body>
</html>
HTML Formatting Elements
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
HTML <b> and <strong>
Elements
The HTML <b> element defines bold text, without any extra
importance
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body>
</html>
HTML <i> and <em> Elements
The HTML <i> element defines italic text, without any extra
importance.
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><i>This text is italic.</i></p>
</body>
</html>
HTML <small> Element
The HTML <small> element defines smaller text
<!DOCTYPE html>
<html>
<body>
<h2>HTML <small>Small</small> Formatting</h2>
</body>
</html>
HTML <mark> Element
The HTML <mark> element defines marked or
highlighted text
<!DOCTYPE html>
<html>
<body>
<h2>HTML <mark>Marked</mark> Formatting</h2>
</body>
</html>
HTML <del> Element
The HTML <del> element defines deleted (removed) text
<!DOCTYPE html>
<html>
<body>
<p>The del element represents deleted (removed)

text.</p>
<p>My favorite color is <del>blue</del> red.</p>
</body>
</html>
HTML <ins> Element
The HTML <ins> element defines inserted (added) text
<!DOCTYPE html>
<html>
<body>
<p>The ins element represent inserted (added) text.</p>
<p>My favorite <ins>color</ins> is red.</p>
</body>
</html>
HTML <sub> Element
The HTML <sub> element defines subscripted text
<!DOCTYPE html>
<html>
<body>
<p>This is <sub>subscripted</sub> text.</p>
</body>
</html>
HTML <sup> Element
The HTML <sup> element defines superscripted text
<!DOCTYPE html>
<html>
<body>
<p>This is <sup>superscripted</sup>
text.</p>
</body>
</html>
HTML Comment Tags
You can add comments to your HTML
source by using the following syntax

Lesson 1.2 HTML

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Lesson 1.2 HTML

Hochgeladen von

Copyright:

Verfügbare Formate

Lesson 1.

HTML stands for Hyper Text Markup

<h1>My First Heading</h1>

The text between <html> and

The text between <head> and

The text between <body> and </body>

The text between <h1> and </h1> describes

The text between <p> and </p> describes a

The first tag in a pair is the start tag,

The end tag is written like the start tag,

The browser does not display the

The <!DOCTYPE> declaration

It must only appear once, at the top

The doctype declaration is not case

Simple text editor like Notepad (PC) or

We believe using a simple text editor

<h1> defines the most important

<h1>This is heading 1</h1>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h2>This is heading 2</h2>

The <head> element is a container for

The <head> element is placed between the

<p>The HTML head element contains meta data.</p>

Large or small screens, and resized windows will

With HTML, you cannot change the output by

The browser will remove any extra spaces and

Use <br> if you want a line break (a

<p>This is<br>a paragraph<br>with

<p>This is<br>a paragraph<br>with line

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

The HTML <pre> element defines

The text inside a <pre> element is

<p>The pre tag preserves both spaces and line breaks:</p>

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

The HTML style attribute has the

Note: The property is a CSS property. The value is a

This example sets the background

<h1 style="color:blue;">This is a heading</h1>

<p>This text is normal.</p>

<p><b>This text is bold.</b></p>

<p>This text is normal.</p>

<p><i>This text is italic.</i></p>

<h2>HTML <small>Small</small> Formatting</h2>

<h2>HTML <mark>Marked</mark> Formatting</h2>

<p>The del element represents deleted (removed)

<p>My favorite color is <del>blue</del> red.</p>

<p>The ins element represent inserted (added) text.</p>

<p>My favorite <ins>color</ins> is red.</p>

<p>This is <sub>subscripted</sub> text.</p>

Das könnte Ihnen auch gefallen