HTML Intro

HTML Introduction
What is HTML?
HTML is the standard markup language for creating Web pages.
• HTML stands for Hyper Text Markup Language
• HTML describes the structure of Web pages using markup
• HTML elements are the building blocks of HTML pages
• HTML elements are represented by tags
• HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
• Browsers do not display the HTML tags, but use them to render the content of the page
HTML Versions
Since the early days of the web, there have been many versions of HTML:
VERSION YEAR
HTML 1.0 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
HTML 5.2 2017

HTML Introduction
A Simple HTML Document

Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>
HTML Introduction
Example Explained
• The <!DOCTYPE html> declaration defines this document to be HTML5
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the document
• The <title> element specifies a title for the document
• The <body> element contains the visible page content
• The <h1> element defines a large heading
• The <p> element defines a paragraph
HTML Document
• All HTML documents must start with a document type declaration: <!
DOCTYPE html>.
• Element <!DOCTYPE> is intended to indicate the type of the document - DTD
(document type definition), for the browser to know how to parse the page.
• The <!DOCTYPE> declaration is not an HTML tag, it is an instruction to the web
browser about what version of HTML the page is written in.
• The HTML document itself begins with <html> and ends with </html>.
• The visible part of the HTML document is between <body> and </body>.
Tags
Opening and closing tags
<tag>Some text</tag>
Single (empty) tag:
<tag />
Parent and child tags:
<first-tag>
<second-tag>Some text</second-tag>
</first-tag>
Comments:

HTML Introduction
• Headings
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
• Some block elements:

<p>, <pre>, <address>, <blockquote>
• Some inline elements:

<sub>, <sup>, <del>, <ins>, <code>, <q>, <cite>,
<big>, <small>, <b>, <strong>, <i>, <em>, <br>, <hr>
A block-level element always starts on a new line.
A block-level element always takes up the full width

available (stretches out to the left and right as far as it can).
Block vs A block level element has a top and a bottom margin,
Inline whereas an inline element does not.
Elements An inline element does not start on a new line.
An inline element only takes up as much width as

necessary.
Attributes
• Example:
<tag attribute1="value" attribute2="value"> ... </tag>
• Extend the capabilities of individual tags. The order of the attributes doesn’t matter.
• Examples: id, class, name, title, style, src, type
• All HTML elements can have attributes
• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value“
Example: title attribute is an optional tooltip (on ANY element)
HTML Images
• HTML images are defined with the <img> tag.
• The source file (src), alternative text (alt), width, and height are provided as attributes:
Example
<img src=“image.jpg" alt=“CVR logo" width="104" height="142">
• The src attribute specifies the image URL
• If the browser is unable to fetch the image, it will show the alt text
• If placed in an a anchor, the image becomes a link
• Other attributes are width and height: their value can be given as pixels or percentage of
window.
• If not used, the image will be shown in its actual size
• Images
<img src="img/picture.png" alt="Alt text" />
• Links
<a href="https://www.google.com/">Go to Google</a>
• Image inside a link

<a href=" https://www.google.com /">
<img src="img/picture.png" />
</a>
Empty HTML Elements
• HTML elements with no content are called empty elements.
• <br> is an empty element without a closing tag (the <br> tag defines a line break).
• Empty elements can be "closed" in the opening tag like this: <br />.
• HTML5 does not require empty elements to be closed. But if you want stricter validation, or
if you need to make your document readable by XML parsers, you must close all HTML
elements properly.
The title Attribute
• Here, a title attribute is added to the <p> element. The value of the title attribute will be
displayed as a tooltip when you mouse over the paragraph:
Example
<p title="I'm a tooltip">This is a paragraph.</p>
HTML Horizontal Rules

• The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a
horizontal rule.
• The <hr> element is used to separate content (or define a change) in an HTML page:
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 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:
Example
<p>This is<br>a paragraph<br>with line breaks.</p>
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;">
• The property is a CSS property.
• The value is a CSS value.
• The style attribute is used to specify the styling of an element, like color, font, size etc.
Example
<p style="color:red">I am a paragraph</p>
Bigger Headings
• Each HTML heading has a default size. However, you can specify the size for any heading
with the style attribute, using the font-size property:
• The font-size property defines the text size for an HTML element:
Example
<h1 style="font-size:60px;">Heading 1</h1>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
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:
Example
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
HTML Text Color
• The color property defines the text color for an HTML element:
Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
HTML Fonts
• The font-family property defines the font to be used for an HTML element:
Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
HTML Text Alignment
• The text-align property defines the horizontal text alignment for an HTML
element:
Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
• 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>
<pre> Element Text in a pre element

is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
HTML Text Formatting
• HTML also defines special elements for defining text with a special meaning.
• HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
• Formatting elements were designed to display special types of text:
Example
<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
HTML Text <mark> - Marked text
Formatting <small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
Unordered HTML List - Choose List Item
Marker
• The CSS list-style-type property is used to define the style of the list item marker:
Value Description
Disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
Square Sets the list item marker to a square
None The list items will not be marked

Ordered HTML List - The Type Attribute
• The type attribute of the <ol> tag, defines the type of the list item marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
HTML Description Lists
 HTML also supports description lists
 A description list is a list of terms, with a description of each term.
 The <dl> tag defines the description list, the <dt> tag defines the term (name), and the
<dd> tag describes each term
Example
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>HTTP</dt>
<dd>Hypertext Transfer Protocol</dd>
</dl>

HTML Intro

Uploaded by

Copyright:

Available Formats

You might also like

HTML Intro

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Intro

Uploaded by

Copyright:

Available Formats

HTML Introduction

HTML 1.0 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

HTML 5.2 2017

A Simple HTML Document

Single (empty) tag:

Parent and child tags:

• Some block elements:

• Some inline elements:

A block-level element always takes up the full width

Elements An inline element does not start on a new line.

An inline element only takes up as much width as

• Image inside a link

• HTML elements with no content are called empty elements.

HTML Horizontal Rules

HTML Line Breaks

The HTML <pre>

<pre> Element Text in a pre element

Disc Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle

Square Sets the list item marker to a square

None The list items will not be marked

You might also like