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