HTML Tutorial Part-4

Updated: Oct 6, 2019


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.


Example:


Relative File Paths


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


Example:


HTML Head


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

Example:


The HTML <style> Element


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


Example:


The HTML <link> Element


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


Example:


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">

Example:


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

Example:


The HTML <base> Element


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


Example:


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.


Example:

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.


Example:


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:


Example:


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:


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:


Example:



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.

Example:

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.

Example:


If you like Codersarts blog and looking for Assignment help,Project help, Programming tutors help and suggestion  you can send mail at contact@codersarts.com.


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

Contact Us

Tel: (+91) 0120  4118730  

Time :   10 : 00  AM -  08 : 00 PM IST 

Registered address: G-69, Sector 63, 

 Noida - 201301, India

We Provide Services Across The different countries

USA    Australia   Canada   UK    UAE    Singapore   New Zealand    Malasia   India   Ireland   Germany

CodersArts is a Product by Sofstack Technology Solutions Pvt. Ltd.

  • CodersArts | Linkedin
  • Instagram