W e b t u t o r i a l s

Directory Structure

DOCTYPE Declaration

Audio and Videos tag

YouTube Videos

Elements Removed

Semantic Elements

HTML5 Basic Structure

HTML5 New Elements

Create Element

Browser Support

HTML5 Form Element

HTML5 Plug-Ins

Directory Structure

Single Folder Structure:
If your project HTML files, images, style sheets, javascripts etc are in same/single folder than you just have to apply filename.
Syntax: <img src="flower.jpg">

Separate Sub-Folder:
If your project HTML files, images, style sheets, javascripts etc are in sub folder than you must have to apply directory/folder name before specifying filename.
Syntax: <img src="images/flower.jpg">

Separate Folder: if your project HTML files, images, style sheets, javascripts etc are in different/separate folders and it look like the structure shown in the image than use the following syntax to apply image.

<img src="../Folder2/flower.jpg">

'..' (dot dot) is use to move the directory one folder up or to move out from the currect folder.

Root folder: if you want to specify root folder, root folder is the main folder of your project, where all sub-folders and files are located, than use ('/') symbol. Root folder symbol is mainly use when you are making your website online.

<img src="/images/flower.jpg">

File Paths

When you are linking a file on your webpage, you can specify the URL or file path in two different ways i.e. relative path and absolute path.

Relative File Path

Relative file path is a way to specify file name in your webpage. Relative file path is a short hand to specify a particular folder from the currect folder.

Window Relative path: images\flower.jpg

Internet URL Relative path: images/flower.jpg

Absolute File Path

An absolute file path is the full path from the root folder to its file name. Absolute file path is also known as External path.

Windows absolute path: c:\myproject\images\flower.jpg

Internet URL absolute path: https://www.website-name.com/images/flower.jpg

 
Updated: 23-Oct-18