Scribd
Upload
5 views19 pages

HTML Layouts, Fonts, Styles, Head and Meta

The document provides an introduction to web design, focusing on HTML layout elements such as headers, navigation bars, content sections, and footers. It explains the importance of a well-structured layout for user experience and includes examples of HTML code for various elements. Additionally, it covers the HTML head element, including metadata, styles, and viewport settings for responsive design.

Uploaded by

nalumansitheresa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views19 pages

HTML Layouts, Fonts, Styles, Head and Meta

The document provides an introduction to web design, focusing on HTML layout elements such as headers, navigation bars, content sections, and footers. It explains the importance of a well-structured layout for user experience and includes examples of HTML code for various elements. Additionally, it covers the HTML head element, including metadata, styles, and viewport settings for responsive design.

Uploaded by

nalumansitheresa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 19

INTRODUCTION TO WEB DESIGN

DCIS1204
SEMISTER TWO
YEAR ONE
HTML layout

A well-made HTML layout improves user experience in two significant ways:



Simplifies navigation by clarifying the structure

Makes the design more visually appealing

There are four basic elements you will find in pretty much every page layout design:
HTML layout

Note: A website is often divided into headers, menus, content and a footer
HTML layout

Header
A header is usually located at the top of the website (or right below a top navigation menu). It often
contains a logo or the website name:
Navigation Bar
A navigation bar contains a list of links to help visitors navigating through your website By using
HTML nav tag, you can put a group of links in a single semantic element, making your website
more organized.
This element is useful for users navigating the main sections of a website.
Tables of contents and menus are good examples of HTML nav elements.
HTML nav tags can be used in any section of a website.
HTML layout

Example
<nav>
<ul>
<li><a href="https://www.bitdegree.org/tag/interactive-learning">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
HTML layout

Content
The layout in this section, often depends on the target users. The most common layout is one (or
combining them) of the following
1-column (often used for mobile browsers)
2-column (often used for tablets and laptops)
3-column layout (only used for desktops)
HTML section tags surround a generic section of the content in a web page or application.
They were introduced in HTML5 and support global attributes.
If you want to group elements to a generic container, use <div> tag instead.
You must use both opening and ending section tags.
The HTML section element, defined by section tags, defines a section of a document, web page, or
an application
HTML layout

Example
<section>
<h1>Section Heading</h1>
<p>The section tag can contain any elements.</p>
<img src="image.png" alt="section example">
</section>
Elements of a section are similar in theme and thus possible to group together logically. For
example, a company's web site might have separate sections for contact information, news, or
special offers.
For identification purposes, HTML sections usually have headings, like <h1>, <h2>, ... <h6>.
Note: HTML5 section is called a semantic element, because the tag defines its content. Such
elements help browsers understand web pages correctly.
HTML layout

HTML footer:
HTML <footer> leaves a footer for its closest sectioning content or root element.
The <footer> HTML element can also be used inside individual blocks in a web document (apart
from web document's main footer content).
<footer> HTML defines a footer in webpages. The <footer> in HTML contains generally repetitive
content like contact details, authors' information, licenses, copyright information, etc.
Example
<footer>
<address>
Postal Address: Door No.00, Street, City, State, Country.
</address>
<p>Copyright © 2018 All rights reserved.</p>
</footer>
HTML style

The HTML Style Attribute


Setting the style of an HTML element, can be done with the style attribute.
Syntax
<tagname style="property:value;">
Note: The property is a CSS property. The value is a CSS value.
Background Color
The CSS background-color property defines the background color for an HTML element.
Example
Set the background color for a page to powderblue:
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
HTML style

Example
Set background color for two different elements:
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
Text Color
The CSS color property defines the text color for an HTML element:
Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
HTML style

Fonts
The CSS font-family property defines the font to be used for an HTML element:
Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Text Size
The CSS font-size property defines the text size for an HTML element:
Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
HTML style

Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML element:
Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
HTML head

The HTML <head> Element


The <head> element primarily is the container for all the head elements, which provide extra
information about the document (metadata), or reference to other resources that are required for the
document to display or behave correctly in a web browser.

The head elements collectively describes the properties of the document such as title, provide meta
information like character set, instruct the browser where to find the style sheets or scripts that
allows you to extend the HTML document in a highly active and interactive ways.

The HTML elements that can be used inside the <head> element are: <title>, <base>, <link>,
<style>, <meta>, <script>
HTML head

Elements that are included in the <head>


The HTML <title> Element
The <title> element defines the title of the document. The title must be text-only, and it is shown in
the browser's title bar or in the page's tab.
The <title> element is required in HTML documents!
The contents of a page title is very important for search engine optimization (SEO)! The page title
is used by search engine algorithms to decide the order when listing pages in search results.
HTML head

The <title> element:


defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search engine-results
Example
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML head

The HTML <style> Element


The <style> element is used to define style information for a single HTML page
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
The HTML <link> Element
The <link> element defines the relationship between the current document and an external resource.
The <link> tag is most often used to link to external style sheets:
Example
<link rel="stylesheet" href="mystyle.css">
HTML head

The HTML <meta> Element


The <meta> element is typically used to specify the character set, page description, keywords,
author of the document, and viewport settings.
The metadata will not be displayed on the page, but are used by browsers (how to display content
or reload page), by search engines (keywords), and other web services.
HTML head

Examples The HTML <meta> Element


Define the character set used:
<meta charset="UTF-8">
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, JavaScript">
Define a description of your web page:
<meta name="description" content="Free Web tutorials">
Define the author of a page:
<meta name="author" content="John Doe">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
Setting the viewport to make your website look good on all devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTML head

Example
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
Setting The Viewport
The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than
on a computer screen.
You should include the following <meta> element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary
depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

You might also like