Scribd
Upload
7 views14 pages

Web Design 01

HTML, invented by Tim Berners-Lee in 1991, is the standard markup language for creating web pages, with its latest version, HTML5, introduced in 2012. This course is designed for beginners interested in web design and development, teaching them to create simple web pages and structure content using HTML. Key concepts include HTML tags, document structure, and attributes, which are essential for building and formatting websites.

Uploaded by

it.nietech
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views14 pages

Web Design 01

HTML, invented by Tim Berners-Lee in 1991, is the standard markup language for creating web pages, with its latest version, HTML5, introduced in 2012. This course is designed for beginners interested in web design and development, teaching them to create simple web pages and structure content using HTML. Key concepts include HTML tags, document structure, and attributes, which are essential for building and formatting websites.

Uploaded by

it.nietech
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

A Brief History of HTML

• Invented by Tim Berners-Lee in 1991, HTML was originally created to help researchers
share documents online.

• The first official version was HTML 2.0, published in 1995.

• Later came HTML 4.01 in 1999, which became widely used.

• In 2012, HTML5 was introduced — the latest and most powerful version, supporting
multimedia, mobile-friendly design, and more.

Who Should Learn HTML?

This course is for beginners — especially aspiring web designers and developers — who want
to learn how to build websites. If you’ve ever wondered how websites are made, this is the
perfect place to start!

By the end of this course, you’ll know how to:

• Create simple web pages


• Add text, images, and links
• Structure a website using HTML

What Should You Know Before Starting?

No programming experience is required, but you should be comfortable with the basics of using
a computer. Here's what will help:

• Experience with a text editor (like Notepad, Notepad++, or Visual Studio Code)
• Knowing how to create and save files on your computer
• Basic skills like navigating folders/directories
• A simple understanding of image formats like .jpg, .png

Final Note

Learning HTML is the first step toward becoming a web developer. Once you master it, you’ll be
ready to learn CSS (for design) and JavaScript (for interaction). So, let’s get started and build
your first web page!
Introduction to HTML

What is HTML?

HTML stands for Hypertext Markup Language. It is the standard language used to create and
design webpages. Think of HTML as the skeleton of a webpage — it gives structure to all the
text, images, links, and other content you see on the internet.

HTML uses "tags" to markup content. For example:

The <p> tag tells the browser that the text is a paragraph.

Key Concepts:

• HyperText: Refers to links that connect web pages to one another.

• Markup Language: Uses tags to define elements within a document for the browser to
render and display content properly.

Purpose of HTML

Originally designed to structure documents (like academic papers), HTML is now used to build
and format websites with various multimedia content.

Basic HTML Document Example


To view the above:

1. Save it as a .html file (e.g., test.htm).

2. Open it with a web browser like Chrome, Firefox, or Edge.

Basic HTML Tags Used

Tag Description

<!DOCTYPE ...> Declares the HTML version and document type.

<html> Root element of the HTML document.

<head> Contains metadata, links, scripts, and the document’s <title>.

<title> Sets the title of the document (shown on browser tab).

<body> Contains the visible content of the web page.

<h1> Defines a heading (there are 6 levels: h1 to h6).

<p> Defines a paragraph.

HTML Document Structure

• Always start with the <!DOCTYPE> declaration to inform the browser of the HTML
version.

• The <html> tag wraps everything.

• The <head> section contains information about the document.

• The <body> contains the actual content of the document.


HTML5 Doctype:

This is the simplest and most common declaration. It ensures your page will be rendered
using the latest HTML standards.

Heading Tags

HTML provides six levels of headings, from <h1> (largest/most important) to <h6>
(smallest/least important). They structure the document and are typically displayed in bold.

Example:

Paragraph Tag

Paragraphs are defined using the <p> tag.

Example:

Each paragraph starts on a new line and adds space above and below the content.

Line Break Tag

Use the <br /> tag to insert a line break without starting a new paragraph. It's a self-closing
(empty) tag.

Example:
Centering Content

The <center> tag centers the content horizontally. Note: this tag is deprecated in HTML5 and
CSS should be used instead.

Example:

Horizontal Lines

The <hr /> tag is used to insert a horizontal rule (line) that separates content.

Example:

Preserve Formatting

Use the <pre> tag to preserve whitespace, tabs, and line breaks.

Example:
Nonbreaking Spaces

To prevent browsers from breaking a line of text at a space, use &nbsp; (non-breaking
space).

Example:

HTML Elements and Attributes

HTML Tags vs. HTML Elements


An HTML tag is a piece of markup code that tells the browser how to display content. An
HTML element consists of a starting tag, the content, and an ending tag.
Start Tag Content End Tag
<p> This is paragraph content. </p>
<h1> This is heading content. </h1>
<div> This is division content. </div>
<br /> (void element - no end)
• <p>...</p> is a paragraph element
• <h1>...</h1> is a heading element
• <br /> is a void element – it doesn’t have any content or closing tag

What are Void Elements?


Void elements do not wrap any content and are self-closing. Common void elements
include:
• <br /> – line break
• <hr /> – horizontal rule
• <img /> – image

Nested HTML Elements


HTML elements can be placed inside one another. This is called nesting.
Example:
HTML Attributes
Attributes provide additional information about HTML elements. They are placed within
the opening tag.
Attribute Syntax

• Name: the property to set (e.g., align)


• Value: what you want to set (e.g., center)
Attribute names and values are not case-sensitive, but it is best practice to use lowercase for
both.
Example: align Attribute

HTML Core Attributes (Used in Most Tags)


There are 4 important core attributes that can be used in most HTML tags:
Attribute Purpose
id Uniquely names an element
title Shows a tooltip when you hover
class Groups elements for styling
style Adds CSS styles directly to an element

1. id Attribute
• Used to uniquely identify an element on the page.
• Each id must be unique.
2. title Attribute
Adds a tooltip that shows when the mouse hovers over the element.

3. class Attribute
• Groups similar elements.
• Can be used in CSS to style multiple elements.

You can add multiple classes:

4. style Attribute
• Lets you write CSS rules directly in the tag.

Internationalization Attributes
These attributes help you control language and text direction in your HTML pages.
Attribute Use Example Value
dir Text direction ltr (left to right), rtl (right to left)
lang Page/document language en, fr, sw, etc.
xml:lang Same as lang but for XHTML en, fr, etc.

dir Example (Right-to-Left text):

lang Example:
Generic Attributes (Used in Many Tags)
Attribute Description Example Values
align Aligns text horizontally left, center, right
valign Aligns content vertically (tables) top, middle, bottom
bgcolor Sets background color #FF0000, red, rgb(0,0,0)
background Sets a background image background="img.jpg"
width Sets width (in px or %) width="300"
height Sets height height="100"

HTML formatting
• Bold (<b>)
• Italic (<i>)
• Underlined (<u>)
• Strike (<strike>)
• Monospaced (<tt>)
• Superscript (<sup>)
• Subscript (<sub>)
• Inserted (<ins>)
• Deleted (<del>)
• Larger (<big>)
• Smaller (<small>)
• Larger (<big>)
• Smaller (<small>)

Grouping Text and Inline Containers


1. <span> – Generic Inline Container
The <span> tag is used to group inline-elements in a document. It doesn't apply any formatting
by itself, but it is useful when used with attributes like class or style.
Example:

2. <div> – Generic Block Container


The <div> element is used to group block-level content. Like <span>, it doesn’t apply any style
on its own, but is commonly used with CSS or JavaScript.
Example:
Phrase Tags (Semantic Formatting)
3. <em> – Emphasized Text
The <em> tag is used to emphasize a word or phrase. Browsers usually render this as italic.
Example:

4. <strong> – Important Text


The <strong> tag is used to indicate strong importance. Browsers usually render this as bold.
Example:

5. <mark> – Highlighted Text


The <mark> tag is used to highlight parts of text (usually in yellow).
Example:

6. <abbr> – Abbreviation
The <abbr> tag is used to show the full form of an abbreviation when the user hovers over it.
Example:

7. <cite> – Citation
The <cite> tag is used to reference a title of a creative work (books, movies, articles).
Example:

8. <code> – Code Snippets


The <code> tag is used to display code snippets in a monospaced font.
Example:

Grouping Content in HTML


HTML provides two useful tags for grouping elements: <div> and <span>.
<div> – Block-level Container
• Used to group block-level elements (like headings, paragraphs, lists, etc.).
• Often used to organize sections like headers, footers, menus, sidebars, etc.
• Commonly paired with CSS to style large sections of content.
Example:

Note: bgcolor and align are outdated; prefer using CSS like style="background-color:white;" and
CSS centering methods.

<span> – Inline Container


• Used to group inline elements (like words or phrases within a paragraph).
• Great for applying styles to specific parts of a sentence.
Example:
Key Use: Both <div> and <span> are neutral containers—meaning they don’t style anything on
their own but become powerful when combined with CSS.

Phrase Tags (Semantic Formatting)


Phrase tags provide meaningful text markup. Let’s see some examples:
<em> – Emphasized Text
• Displays italic text.
• Also conveys importance semantically (good for screen readers and SEO).

<mark> – Marked/Highlighted Text


• Highlights text, usually with a yellow background.

<strong> – Strong Importance


• Displays text in bold.
• Also signals semantic importance.

<abbr> – Abbreviation
Used to represent abbreviations. Use the title attribute to provide the full form.
Example:

When users
hover, they'll see the full form “Abhishek”.
<acronym> – Acronym (Deprecated in HTML5)
Was used to mark acronyms, but now <abbr> is preferred.
Example:
Note: Avoid using <acronym> in modern HTML. Use <abbr> instead.

<bdo> – Bi-directional Override


Used to override the current text direction (e.g., right-to-left languages).
Example:

<dfn> – Definition
Used to introduce a term being defined.
Example:

<blockquote> – Long Quotations


For quoting large blocks of text from another source.
Example:

<q> – Short Quotations


Used for short, inline quotations. Browsers usually add quotation marks.
Example:

<cite> – Citation
Used to reference the title of a work (like books, articles, or websites). Often italicized.
Example:

Programming & Technical Tags


<code> – Inline Code
Used to display code snippets in a monospaced font.
Example:
<kbd> – Keyboard Input
Used to show text the user should type.
Example:

<var> – Variable
Used to denote variables in code or formulas.
Example:

<samp> – Sample Output


Used to display output from programs or scripts.
Example:

<address> – Contact Information


Used for physical or email addresses, often styled in italic and line breaks by browsers.
Example:

You might also like