Scribd
Upload
6 views44 pages

Unit 1 (WDT)

The document provides an overview of web design, highlighting its importance in creating user-friendly websites and applications. It explains the differences between desktop and web applications, introduces HTML as the standard markup language for web pages, and details various HTML elements, attributes, and formatting options. Additionally, it covers the history of HTML and provides examples of how to use HTML for structuring content, styling, and formatting text.

Uploaded by

anil kasula
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
6 views44 pages

Unit 1 (WDT)

The document provides an overview of web design, highlighting its importance in creating user-friendly websites and applications. It explains the differences between desktop and web applications, introduces HTML as the standard markup language for web pages, and details various HTML elements, attributes, and formatting options. Additionally, it covers the history of HTML and provides examples of how to use HTML for structuring content, styling, and formatting text.

Uploaded by

anil kasula
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/ 44

Web design:

Web design is the creation of websites and pages to reflect a company’s brand and information and
ensure a user-friendly experience. Appearance and design are incorporated as vital elements whether
you’re designing a website, mobile app or maintaining content on a web page.
Differences between Desktop Applications and Web Applications
Desktop apps Web apps
They are accessible through web browsers and do
They require installation on the computer to run.
not require installation.
Generally, desktop apps do not require an internet Web apps cannot run without an internet
connection to run. connection.
They are accessible from anywhere and through
They are accessible only in the machine they are
any device with an internet connection and a web
installed in.
browser.
They take space on the hard drive of the local
They take space on the remote server.
computer.
Deployment and updating are to be done Deployment and updating are done only on the
individually on each computer. server.
Web apps are hardware independent and just
They have strict hardware requirements for proper
require a web browser and internet connection to
functionality.
function.
As they are confined to a device and single or As web apps are accessible to all through the
limited users, they are highly secure. internet, they are less secure than desktop apps.
Generally, they are slower than desktop
Generally, they are faster than web applications.
applications.

Introduction to HTML

HTML is the standard mark-up language for creating Web pages.

What is HTML?
• HTML stands for Hyper Text Mark-up Language
• HTML is the standard mark-up language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this
is a link", etc.
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start Element content End
tag tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> None none

Web Browsers:

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and
display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the document:

HTML Page Structure:

Below is a visualization of an HTML page structure:

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph. </p>
</body>
</html>
HTML History

Since the early days of the World Wide Web, there have been many versions of HTML:

Year Version
1989 Tim Berners-Lee invented www

1991 Tim Berners-Lee invented HTML

1993 Dave Raggett drafted HTML+

1995 HTML Working Group defined HTML 2.0

1997 W3C Recommendation: HTML 3.2

1999 W3C Recommendation: HTML 4.01

2000 W3C Recommendation: XHTML 1.0

2008 WHATWG HTML5 First Public Draft

2012 WHATWG HTML5 Living Standard

2014 W3C Recommendation: HTML5

2016 W3C Candidate Recommendation: HTML 5.1

2017 W3C Recommendation: HTML5.1 2nd Edition

2017 W3C Recommendation: HTML5.2

HTML Elements:
An HTML element is defined by a start tag, some content, and an end tag.

he HTML element is everything from the start tag to the end tag:

<tagname>Content goes here...</tagname>

Examples of some HTML elements:

<h1>My First Heading</h1>


<p>My first paragraph.</p>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>


<br> none None

Nested HTML Elements:

HTML elements can be nested (this means that elements can contain other elements).

All HTML documents consist of nested HTML elements.

The following example contains four HTML elements (<html>, <body>, <h1> and <p>):

Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
Empty HTML Elements

HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element without a closing tag:

Example
<p>This is a <br> paragraph with a line break.</p>
HTML is Not Case Sensitive

HTML tags are not case sensitive: <P> means the same as <p>.

The HTML standard does not require lowercase tags,

HTML Attributes

HTML attributes provide additional information about HTML elements.

HTML Attributes

• All HTML elements can have attributes


• Attributes provide additional information about elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"
The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

Example
<a href="https://www.w3schools.com">Visit W3Schools</a>
Try it You<!DOCTYPE html>
<html>
<body>
<h2>The href Attribute</h2>
<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>
<a href="https://www.w3schools.com">Visit W3Schools</a>
</body>
</html>rself »
The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the
image to be displayed:

Example
<img src="img_girl.jpg">
Try <!DOCTYPE html>
<html>
<body>
<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag, and the filename of the image source is specified in
the src attribute:</p>

<img src="img_girl.jpg" width="500" height="600">


</body>
</html>Yourself »

There are two ways to specify the URL in the src attribute:

1. Absolute URL - Links to an external image that is hosted on another website.


Example: src="https://www.w3schools.com/images/img_girl.jpg".
Notes: External images might be under copyright. If you do not get permission to use it, you may be
in violation of copyright laws. In addition, you cannot control external images; it can suddenly be
removed or changed.

2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not
include the domain name. If the URL begins without a slash, it will be relative to the current page.
Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain.
Example: src="/images/img_girl.jpg".

Tip: It is almost always best to use relative URLs. They will not break if you change domain.

The width and height Attributes

The <img> tag should also contain the width and height attributes, which specify the width and height
of the image (in pixels):

Example
<img src="img_girl.jpg" width="500" height="600">
Try it Yourself »
The style Attribute

The style attribute is used to add styles to an element, such as color, font, size, and more.

Example
<p style="color:red;">This is a red paragraph.</p>
The style Attribute

The style attribute is used to add styles to an element, such as color, font, size, and more.

Example
<p style="color:red;">This is a red paragraph.</p>
Suggest: Always Quote Attribute Values

The HTML standard does not require quotes around attribute values.

However, W3C recommends quotes in HTML, and demands quotes for stricter document types like
XHTML.

Good:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Bad:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>
Single or Double Quotes?

Double quotes around attribute values are the most common in HTML, but single quotes can also be
used.

In some situations, when the attribute value itself contains double quotes, it is necessary to use single
quotes:

<p title='John "ShotGun" Nelson'>

Or vice versa:

<p title="John 'ShotGun' Nelson">


HTML Headings

HTML headings are titles or subtitles that you want to display on a webpage.

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Bigger Headings

Each HTML heading has a default size. However, you can specify the size for any heading with
the style attribute, using the CSS font-size property:

Example
<h1 style="font-size:60px;">Heading 1</h1>
HTML Paragraphs

A paragraph always starts on a new line, and is usually a block of text. he HTML <p> element defines
a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin)
before and after a paragraph.

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Styles

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

Example

I am Red

I am Blue

I am Big
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.

Background Color

The CSS background-color property defines the background color for an HTML element.

Example

Set the background color for a page to powderblue:

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
Example

Set background color for two different elements:

<body>

<h1 style="background-color:powderblue;">This is a heading</h1>


<p style="background-color:tomato;">This is a paragraph.</p>

</body>
Text Color

The CSS 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>
Fonts

The CSS 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>
Text Size

The CSS font-size property defines the text size for an HTML element:

Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Text Alignment

The CSS 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>
HTML Text Formatting

HTML contains several elements for defining text with a special meaning.

Example

This text is bold

This text is italic

This is subscript and superscript

HTML Formatting Elements

Formatting elements were designed to display special types of text:

• <b> - Bold text


• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Smaller 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.

Example
<b>This text is bold</b>

The HTML <strong> element defines text with strong importance. The content inside is typically
displayed in bold.

Example
<strong>This text is important!</strong>
HTML <i> and <em> Elements

The HTML <i> element defines a part of text in an alternate voice or mood. The content inside is
typically displayed in italic.

Tip: The <i> tag is often used to indicate a technical term, a phrase from another language, a thought,
a ship name, etc.

Example
<i>This text is italic</i>

The HTML <em> element defines emphasized text. The content inside is typically displayed in italic.

Tip: A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.

Example
<em>This text is emphasized</em>
HTML <small> Element

The HTML <small> element defines smaller text:

Example
<small>This is some smaller text.</small>
HTML <mark> Element

The HTML <mark> element defines text that should be marked or highlighted:

Example
<p>Do not forget to buy <mark>milk</mark> today.</p>
HTML <del> Element

The HTML <del> element defines text that has been deleted from a document. Browsers will usually
strike a line through deleted text:

Example
<p>My favorite color is <del>blue</del> red.</p>
HTML <ins> Element

The HTML <ins> element defines a text that has been inserted into a document. Browsers will usually
underline inserted text:

Example
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
HTML <sub> Element

The HTML <sub> element defines subscript text. Subscript text appears half a character below the
normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical
formulas, like H2O:

Example
<p>This is <sub>subscripted</sub> text.</p>
HTML <sup> Element

The HTML <sup> element defines superscript text. Superscript text appears half a character above the
normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes,
like WWW[1]:

Example
<p>This is <sup>superscripted</sup> text.</p>
HTML Quotation and Citation Elements
we will go through the <blockquote>,<q>, <abbr>, <address>, <cite>, and <bdo> HTML elements.
HTML <blockquote> for Quotations

The HTML <blockquote> element defines a section that is quoted from another source.

Browsers usually indent <blockquote> elements.

Example
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature thrive. As the world's leading conservation
organization, WWF works in nearly 100 countries. At every level, we collaborate with people around
the world to develop and deliver innovative solutions that protect communities, wildlife, and the
places in which they live.
</blockquote>
HTML <q> for Short Quotations

The HTML <q> tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

Example
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
HTML <abbr> for Abbreviations

The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.",
"ASAP", "ATM".

Marking abbreviations can give useful information to browsers, translation systems and search-
engines.

Tip: Use the global title attribute to show the description for the abbreviation/acronym when you
mouse over the element.

Example
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
HTML <address> for Contact Information

The HTML <address> tag defines the contact information for the author/owner of a document or an
article.

The contact information can be an email address, URL, physical address, phone number, social media
handle, etc.

The text in the <address> element usually renders in italic, and browsers will always add a line break
before and after the <address> element.

Example
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
HTML <cite> for Work Title

The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a
painting, a sculpture, etc.).
Note: A person's name is not the title of a work.

The text in the <cite> element usually renders in italic.

Example
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
HTML <bdo> for Bi-Directional Override

BDO stands for Bi-Directional Override.

The HTML <bdo> tag is used to override the current text direction:

Example
<bdo dir="rtl">This text will be written from right to left</bdo>
HTML Comments

HTML comments are not displayed in the browser, but they can help document your HTML source
code.

HTML Comment Tag

You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->

Notice that there is an exclamation point (!) in the start tag, but not in the end tag.

Note: Comments are not displayed by the browser, but they can help document your HTML source
code.

Add Comments

With comments you can place notifications and reminders in your HTML code:

Example
<!-- This is a comment -->

<p>This is a paragraph.</p>

<!-- Remember to add more information here -->


Hide Content

Comments can be used to hide content.

This can be helpful if you hide content temporarily:


Example
<p>This is a paragraph.</p>

<!-- <p>This is another paragraph </p> -->

<p>This is a paragraph too.</p>

You can also hide more than one line. Everything between the <!-- and the --> will be hidden from the
display.

Example

Hide a section of HTML code:

<p>This is a paragraph.</p>
<!--
<p>Look at this cool image:</p>
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
<p>This is a paragraph too.</p>

Comments are also great for debugging HTML, because you can comment out HTML lines of code,
one at a time, to search for errors.

Hide Inline Content

Comments can be used to hide parts in the middle of the HTML code.

Example

Hide a part of a paragaph:

<p>This <!-- great text --> is a paragraph.</p>


HTML Colors
HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA
values.
Background Color

You can set the background color for HTML elements:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Text Color

You can set the color of text:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.

Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Border Color

You can set the color of borders:

Hello World

Hello World

Hello World

Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
HTML Images

Images can improve the design and the appearance of a web page.

HTML Images Syntax

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag
creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The <img> tag has two required attributes:


• src - Specifies the path to the image
• alt - Specifies an alternate text for the image

Syntax
<img src="url" alt="alternatetext">
The src Attribute

The required src attribute specifies the path (URL) to the image.

Note: When a web page loads, it is the browser, at that moment, that gets the image from a web server
and inserts it into the page. Therefore, make sure that the image actually stays in the same spot in
relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon and
the alt text are shown if the browser cannot find the image.

Example
<img src="img_chania.jpg" alt="Flowers in Chania">
The alt Attribute

The required alt attribute provides an alternate text for an image, if the user for some reason cannot
view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

Example
<img src="img_chania.jpg" alt="Flowers in Chania">

If a browser cannot find an image, it will display the value of the alt attribute:

Example
<img src="wrongname.gif" alt="Flowers in Chania">

Tip: A screen reader is a software program that reads the HTML code, and allows the user to "listen"
to the content. Screen readers are useful for people who are visually impaired or learning disabled.

Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

Example
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

Alternatively, you can use the width and height attributes:

Example
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

The width and height attributes always define the width and height of the image in pixels.
Note: Always specify the width and height of an image. If width and height are not specified, the web
page might flicker while the image loads.

Width and Height, or Style?

The width, height, and style attributes are all valid in HTML.

However, we suggest using the style attribute. It prevents styles sheets from changing the size of
images:

Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>
Images in Another Folder

If you have your images in a sub-folder, you must include the folder name in the src attribute:

Example
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Images on Another Server/Website

Some web sites point to an image on another server.

To point to an image on another server, you must specify an absolute (full) URL in the src attribute:

Example
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

Notes on external images: External images might be under copyright. If you do not get permission to
use it, you may be in violation of copyright laws. In addition, you cannot control external images;
they can suddenly be removed or changed.
Animated Images

HTML allows animated GIFs:

Example
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Image as a Link

To use an image as a link, put the <img> tag inside the <a> tag:

Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Image Floating

Use the CSS float property to let the image float to the right or to the left of a text:

Example
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">


The image will float to the left of the text.</p>

Tip: To learn more about CSS Float, read our CSS Float Tutorial.

Common Image Formats

Here are the most common image file types, which are supported in all browsers (Chrome, Edge,
Firefox, Safari, Opera):

Abbreviation File Format File Extension

APNG Animated Portable Network Graphics .apng

GIF Graphics Interchange Format .gif

ICO Microsoft Icon .ico, .cur

JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp

PNG Portable Network Graphics .png

SVG Scalable Vector Graphics .svg

HTML Tables
HTML tables allow web developers to arrange data into rows and columns.

Define an HTML Table

A table in HTML consists of table cells inside rows and columns.

Example

A simple HTML table:

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
Table Cells

Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Everything between <td> and </td> are the content of the table cell.

Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>

Note: A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc.

Table Rows

Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.

Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

You can have as many rows as you like in a table; just make sure that the number of cells are the same
in each row.

Note: There are times when a row can have less or more cells than another. You will learn about that
in a later chapter.

Table Headers

Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of
the <td> tag:

th stands for table header.

Example

Let the first row be table header cells:

<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
HTML Lists
HTML lists allow web developers to group a set of related items in lists.
Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
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>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML List Tags

Tag Description

<ul> Defines an unordered list


<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Describes the term in a description list

HTML Block and Inline Elements


Block-level Elements

A block-level element always starts on a new line, and the browsers automatically add some space (a
margin) before and after the element.

A block-level element always takes up the full width available (stretches out to the left and right as far
as it can).

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML document.

The <p> element is a block-level element.

The <div> element is a block-level element.


Example
<p>Hello World</p>
<div>Hello World</div>

Here are the block-level elements in HTML:

<address>

<article>

<aside>

<blockquote>

<canvas>

<dd>

<div>
<dl>

<dt>

<fieldset>

<figcaption>

<figure>

<footer>

<form>

<h1>-<h6>

<header>

<hr>

<li>

<main>

<nav>

<noscript>

<ol>

<p>

<pre>

<section>

<table>

<tfoot>

<ul>

<video>
Inline Elements

An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

This is a <span> element inside a paragraph.


Example
<span>Hello World</span>

Here are the inline elements in HTML:

<a>

<abbr>

<acronym>

<b>

<bdo>

<big>

<br>

<button>

<cite>

<code>

<dfn>

<em>

<i>

<img>

<input>

<kbd>

<label>

<map>

<object>

<output>

<q>

<samp>

<script>
<select>

<small>

<span>

<strong>

<sub>

<sup>

<textarea>

<time>

<tt>

<var>

Note: An inline element cannot contain a block-level element!

The <div> Element

The <div> element is often used as a container for other HTML elements.

The <div> element has no required attributes, but style, class and id are common.

When used together with CSS, the <div> element can be used to style blocks of content:

Example
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.</p>
</div>
The <span> Element

The <span> element is an inline container used to mark up a part of a text, or a part of a document.

The <span> element has no required attributes, but style, class and id are common.

When used together with CSS, the <span> element can be used to style parts of the text:

Example
<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes and my father
has <span style="color:darkolivegreen;font-weight:bold;">dark green</span> eyes.</p>
HTML class Attribute
Using The class Attribute

The class attribute is often used to point to a class name in a style sheet. It can also be used by a
JavaScript to access and manipulate elements with the specific class name.

In the following example we have three <div> elements with a class attribute with the value of "city".
All of the three <div> elements will be styled equally according to the .city style definition in the head
section:

Example
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
The Syntax For Class

To create a class; write a period (.) character, followed by a class name. Then, define the CSS
properties within curly braces {}:

Example

Create a class named "city":

<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
Multiple Classes

HTML elements can belong to more than one class.

To define multiple classes, separate the class names with a space, e.g. <div class="city main">. The
element will be styled according to all the classes specified.

In the following example, the first <h2> element belongs to both the city class and also to
the main class, and will get the CSS styles from both of the classes:

Example
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
Different Elements Can Share Same Class

Different HTML elements can point to the same class name.

In the following example, both <h2> and <p> point to the "city" class and will share the same style:

Example
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
HTML Styles - CSS

CSS stands for Cascading Style Sheets.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.
What is CSS?

Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between elements, how
elements are positioned and laid out, what background images or background colors are to be used,
different displays for different devices and screen sizes, and much more!

Tip: The word cascading means that a style applied to a parent element will also apply to all children
elements within the parent. So, if you set the color of the body text to "blue", all headings, paragraphs,
and other text elements within the body will also get the same color (unless you specify something
else)!

Using CSS

CSS can be added to HTML documents in 3 ways:

• Inline - by using the style attribute inside HTML elements


• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS file

The most common way to add CSS, is to keep the styles in external CSS files. However, in this
tutorial we will use inline and internal styles, because this is easier to demonstrate, and easier for you
to try it yourself.

Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the text color of
the <p> element to red:

Example
<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>


Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the
text color of ALL the <p> elements to red. In addition, the page will be displayed with a
"powderblue" background color:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each HTML page:

Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

The external style sheet can be written in any text editor. The file must not contain any HTML code,
and must be saved with a .css extension.

Here is what the "styles.css" file looks like:

"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
Tip: With an external style sheet, you can change the look of an entire web site, by changing one file!

CSS Colors, Fonts and Sizes

Here, we will demonstrate some commonly used CSS properties. You will learn more about them
later.

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

Example

Use of CSS color, font-family and font-size properties:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p{
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Border

The CSS border property defines a border around an HTML element.

Tip: You can define a border for nearly all HTML elements.

Example

Use of CSS border property:


p{
border: 2px solid powderblue;
}
CSS Padding

The CSS padding property defines a padding (space) between the text and the border.

Example

Use of CSS border and padding properties:

p{
border: 2px solid powderblue;
padding: 30px;
}
CSS Margin

The CSS margin property defines a margin (space) outside the border.

Example

Use of CSS border and margin properties:

p{
border: 2px solid powderblue;
margin: 50px;
}
Link to External CSS

External style sheets can be referenced with a full URL or with a path relative to the current web
page.

Example

This example uses a full URL to link to a style sheet:

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">


Example

This example links to a style sheet located in the html folder on the current web site:

<link rel="stylesheet" href="/html/styles.css">


Example

This example links to a style sheet located in the same folder as the current page:

<link rel="stylesheet" href="styles.css">


HTML Iframes
An HTML iframe is used to display a web page within a web page.

HTML Iframe Syntax

The HTML <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Syntax
<iframe src="url" title="description"></iframe>

Tip: It is a good practice to always include a title attribute for the <iframe>. This is used by screen
readers to read out what the content of the iframe is.

Iframe - Set Height and Width

Use the height and width attributes to specify the size of the iframe.

The height and width are specified in pixels by default:

Example
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

Or you can add the style attribute and use the CSS height and width properties:

Example
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe
Example"></iframe>
Iframe - Remove the Border

By default, an iframe has a border around it.

To remove the border, add the style attribute and use the CSS border property:

Example
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

With CSS, you can also change the size, style and color of the iframe's border:

Example
<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>
Iframe - Target for a Link

An iframe can be used as the target frame for a link.

The target attribute of the link must refer to the name attribute of the iframe:
Example
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>


HTML File Paths

A file path describes the location of a file in a web site's folder structure.

File Path Examples

Path Description

<img src="picture.jpg"> The "picture.jpg" file is located in the same folder as the
current page

<img src="images/picture.jpg"> The "picture.jpg" file is located in the images folder in the
current folder

<img src="/images/picture.jpg"> The "picture.jpg" file is located in the images folder at the
root of the current web

<img src="../picture.jpg"> The "picture.jpg" file is located in the folder one level up
from the current folder

HTML File Paths

A file path describes the location of a file in a web site's folder structure.

File paths are used when linking to external files, like:

• Web pages
• Images
• Style sheets
• JavaScripts

Absolute File Paths

An absolute file path is the full URL to a file:

Example
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">

The <img> tag is explained in the chapter: HTML Images.

Relative File Paths

A relative file path points to a file relative to the current page.

In the following example, the file path points to a file in the images folder located at the root of the
current web:
Example
<img src="/images/picture.jpg" alt="Mountain">

In the following example, the file path points to a file in the images folder located in the current
folder:

Example
<img src="images/picture.jpg" alt="Mountain">

In the following example, the file path points to a file in the images folder located in the folder one
level up from the current folder:

Example
<img src="../images/picture.jpg" alt="Mountain">
Best Practice

It is best practice to use relative file paths (if possible).

When using relative file paths, your web pages will not be bound to your current base URL. All links
will work on your own computer (localhost) as well as on your current public domain and your future
public domains.

HTML Layout Elements and Techniques

Websites often display content in multiple columns (like a magazine or a newspaper).

HTML Layout Elements

HTML has several semantic elements that define the different parts of a web page:

• <header> - Defines a header for a document or a section


• <nav> - Defines a set of navigation links
• <section> - Defines a section in a document
• <article> - Defines an independent, self-contained content
• <aside> - Defines content aside from the content (like a sidebar)
• <footer> - Defines a footer for a document or a section
• <details> - Defines additional details that the user can open and close on
• <summary> - Defines a heading for the <details> element

You can read more about semantic elements in our HTML Semantics chapter.
HTML Layout Techniques

There are four different techniques to create multicolumn layouts. Each technique has its pros and
cons:

• CSS framework
• CSS float property
• CSS flexbox
• CSS grid

CSS Frameworks

If you want to create your layout fast, you can use a CSS framework, like W3.CSS or Bootstrap.

CSS Float Layout

It is common to do entire web layouts using the CSS float property. Float is easy to learn - you just
need to remember how the float and clear properties work. Disadvantages: Floating elements are tied
to the document flow, which may harm the flexibility. Learn more about float in our CSS Float and
Clear chapter.

Example
Cities

• London
• Paris
• Tokyo

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history
going back to its founding by the Romans, who named it Londinium.

Footer

CSS Flexbox Layout

Use of flexbox ensures that elements behave predictably when the page layout must accommodate
different screen sizes and different display devices.

Learn more about flexbox in our CSS Flexbox chapter.

Example
Cities

• London
• Paris
• Tokyo
London

London is the capital city of England. It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history
going back to its founding by the Romans, who named it Londinium.

Footer

CSS Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it
easier to design web pages without having to use floats and positioning.

HTML Symbols

Symbols that are not present on your keyboard can also be added by using entities.

HTML Symbol Entities

HTML entities were described in the previous chapter.

Many mathematical, technical, and currency symbols, are not present on a normal keyboard.

To add such symbols to an HTML page, you can use the entity name or the entity number (a decimal
or a hexadecimal reference) for the symbol.

Example

Display the euro sign, €, with an entity name, a decimal, and a hexadecimal value:

<p>I will display &euro;</p>


<p>I will display &#8364;</p>
<p>I will display &#x20AC;</p>
Will display as:
I will display €
I will display €
I will display €
HTML Responsive Web Design

Responsive web design is about creating web pages that look good on all devices!

A responsive web design will automatically adjust for different screen sizes and viewports.
What is Responsive Web Design?

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or
enlarge, a website, to make it look good on all devices (desktops, tablets, and phones):

Setting The Viewport

To create a responsive website, add the following <meta> tag to all your web pages:

Example
<meta name="viewport" content="width=device-width, initial-scale=1.0">

This will set the viewport of your page, which will give the browser instructions on how to control the
page's dimensions and scaling.

Here is an example of a web page without the viewport meta tag, and the same web page with the
viewport meta tag:
Without the viewport meta tag:

With the viewport meta tag:

Tip: If you are browsing this page on a phone or a tablet, you can click on the two links above to see
the difference.

Responsive Images

Responsive images are images that scale nicely to fit any browser size.
Using the width Property

If the CSS width property is set to 100%, the image will be responsive and scale up and down:

Example
<img src="img_girl.jpg" style="width:100%;">

Notice that in the example above, the image can be scaled up to be larger than its original size. A
better solution, in many cases, will be to use the max-width property instead.

Using the max-width Property

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to
be larger than its original size:
Example
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
Show Different Images Depending on Browser Width

The HTML <picture> element allows you to define different images for different browser window
sizes.

Resize the browser window to see how the image below changes depending on the width:
Example
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>
Responsive Text Size

The text size can be set with a "vw" unit, which means the "viewport width".

That way the text size will follow the size of the browser window:

Hello World

Resize the browser window to see how the text size scales.

Example
<h1 style="font-size:10vw">Hello World</h1>

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide,
1vw is 0.5cm.

Media Queries

In addition to resize text and images, it is also common to use media queries in responsive web pages.

With media queries you can define completely different styles for different browser sizes.

Example: resize the browser window to see that the three div elements below will display horizontally
on large screens and stack vertically on small screens:

Left Menu
Main Content

Right Content

Example
<style>
.left, .right {
float: left;
width: 20%; /* The width is 20%, by default */
}

.main {
float: left;
width: 60%; /* The width is 60%, by default */
}

/* Use a media query to add a breakpoint at 800px: */


@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>
Responsive Web Page - Full Example

A responsive web page should look good on large desktop screens and on small mobile phones.

Responsive Web Design - Frameworks

All popular CSS Frameworks offer responsive design.

They are free, and easy to use.

W3.CSS

W3.CSS is a modern CSS framework with support for desktop, tablet, and mobile design by default.

W3.CSS is smaller and faster than similar CSS frameworks.

W3.CSS is designed to be independent of jQuery or any other JavaScript library.

W3.CSS Demo

Resize the page to see the responsiveness!


London

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million
inhabitants.

Paris

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million
inhabitants.

Tokyo

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

Example
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container w3-green">


<h1>W3Schools Demo</h1>
<p>Resize this responsive page!</p>
</div>

<div class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="w3-third">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>

<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>

</body>
</html>

To learn more about W3.CSS, read our W3.CSS Tutorial.

Bootstrap

Another popular CSS framework is Bootstrap. Bootstrap uses HTML, CSS and jQuery to make
responsive web pages.

Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<div class="jumbotron">
<h1>My First Bootstrap Page</h1>
</div>
<div class="row">
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
</div>
</div>

</body>
</html>

You might also like