Sep 23, 2019

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.

    0