top of page

HTML Tutorial Part-4

HTML File Paths

Path Description

  • <img src="photo.jpg"> photo.jpg is located in the same folder as the current page

  • <img src="images/photo.jpg"> photo.jpg is located in the images folder in the current folder

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

  • <img src="../photo.jpg"> photo.jpg 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.

When linking to external files, file paths are used:

  • Web pages

  • Images

  • Style sheets

  • JavaScripts.

Absolute File Paths

An absolute file path defines the full URL address to an internet file.


Relative File Paths

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



The HTML <head> Element

  • The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.

  • HTML metadata is data about the HTML document. Metadata is not displayed.

  • Metadata typically define the document title, character set, styles, scripts, and other meta information.

  • The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.

The HTML <title> Element

The <title> element defines the title of the document, and it is required in all HTML documents.

The <title> element:

  • defines a title in the browser tab

  • provides a title for the page when it is added to favorites

  • displays a title for the page in search engine results


The HTML <style> Element

The <style> element is used to define style information for a single HTML page.


The HTML <link> Element

The <link> element is used to link to external style sheets.


The HTML <meta> Element

  • Metadata is used by browsers (how to display content), by search engines (keywords), and other web services.

  • The <meta> element is used to specify which character set is used, page description, keywords, author, and other metadata.

Define the character set used:

<meta charset="UTF-8">

Define a description of your web page:

<meta name="description" content="Free Web tutorials">

Define keywords for search engines:

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

Define the author of a page:

<meta name="author" content="John Doe">

Refresh document every 30 seconds:

<meta http-equiv="refresh" content="30">


The HTML <script> Element

  • The <script> element is used to define client-side JavaScripts.

  • This JavaScript writes "Hello JavaScript!" into an HTML element with id="demojavascrpt".


The HTML <base> Element

The <base> element specifies the base URL and base target for all relative URLs in a page.


Omitting <html>, <head> and <body>?

According to the HTML5 standard; the <html>, the <body>, and the <head> tag can be omitted.

The following code will validate as HTML5.


HTML Layouts

HTML Layout Elements

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

HTML offers 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 container for navigation links

  • <section> - Defines a section in a document

  • <article> - Defines an independent self-contained article

  • <aside> - Defines content aside from the content (like a sidebar)

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

  • <details> - Defines additional details

  • <summary> - Defines a heading for the <details> element

HTML Layout Techniques

There are five different ways to create multicolumn layouts. Each way has its pros and cons:

  • HTML tables (not recommended)

  • CSS float property

  • CSS flexbox

  • CSS framework

  • CSS grid

HTML Tables

  • The <table> element was not designed to be a layout tool.

  • The <table> element is usually used to display tabular data.

Note:- Tables are not used for table layout.

CSS Frameworks

Framework, like W3.CSS or Bootstrap is used to create fast layout.

CSS Floats

  • The CSS float property is commonly used to do entire web layouts.

  • Float is easy to learn - just by remembering how the float and clear properties work.

  • Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility.

CSS Flexbox

  • Flexbox is a new layout mode in CSS3.

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

  • Disadvantages: Does not work in IE10 and earlier.

CSS Grid View

  • 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.

  • Disadvantages: Does not work in IE nor in Edge 15 and earlier.

HTML Responsive Web Design

  • A Web page is considered good when the Web Design is responsive.

  • A 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

When making responsive web pages, the following <meta> element is added in all the web pages.


Responsive Images

Responsive images are images that scale accordingaly 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:


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:


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 change depending on the width:


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.


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.

Responsive Web Design - Frameworks

  • There are many existing CSS Frameworks that offer Responsive Design.

  • They are free, and easy to use.

Using W3.CSS

A great way to create a responsive design, is to use a responsive style sheet, like W3.CSS

W3.CSS makes it easy to develop sites that look nice at any size; desktop, laptop, tablet, or phonne.


If you like Codersarts blog and looking for Assignment help,Project help, Programming tutors help and suggestion  you can send mail at

Please write your suggestion in comment section below if you find anything incorrect in this blog post.

11 views0 comments


bottom of page