Scribd
Upload
3 views26 pages

Unit - I.docx

This document provides a comprehensive overview of HTML, including its structure, tags, and uses for web design. It covers the creation of HTML documents, layout components, and the integration of CSS for styling web pages. Additionally, it explains key concepts such as hyperlinks, CSS syntax, and the cascading nature of styles.

Uploaded by

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

Unit - I.docx

This document provides a comprehensive overview of HTML, including its structure, tags, and uses for web design. It covers the creation of HTML documents, layout components, and the integration of CSS for styling web pages. Additionally, it explains key concepts such as hyperlinks, CSS syntax, and the cascading nature of styles.

Uploaded by

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

22UCS6E8 - DSE-III: HTML, Javascript and JQuery for Web Designing

Unit I

HTML

Introduction

●​ HTML stands for Hyper Text (i.e Text within Text) Markup Language. HTML is the
standard markup language for creating Web pages. HTML describes the structure of a
Web page.
●​ A markup language is a set of rules that defines how the layout and presentation of text
and images should appear in a digital document.
●​ The first version of HTML was written by Tim Berners-Lee in 1993.
Getting Started
Understanding HTML Tags
HTML tags are composed of an opening tag, content, and a closing tag. The opening tag
marks the beginning of an element, and the closing tag marks the end. The content is the
information or structure that falls between the opening and closing tags. Here's the basic
structure of an HTML tag:
Basic HTML Code - Example Program

Description – Example Program

<!DOCTYPE>: It defines the document type or it instruct the browser about the version of
HTML.
<html > :This tag informs the browser that it is an HTML document. Text between html tag
describes the web document. It is a container for all other elements of HTML except
<!DOCTYPE>

<head>: It should be the first element inside the <html> element, which contains the
metadata(information about the document). It must be closed before the body tag opens.

<title>: As its name suggested, it is used to add title of that HTML page which appears at the top
of the browser window. It must be placed inside the head tag and should close immediately.
(Optional)

<body> : Text between body tag describes the body content of the page that is visible to the end
user. This tag contains the main content of the HTML document.

<h1>: Text between <h1> tag describes the first level heading of the webpage.

<p>: Text between <p> tag describes the paragraph of the webpage.

HTML Uses:
1) Build Websites, 2) Customize Content (Allows you to edit web pages, emails, or templates
to fit your needs), 3) Understand How the Web Works (How web pages are structured), 4)
Employment Opportunities and 5) Learn Easily
Features of HTML
●​ It is easy to learn and easy to use.
●​ It is platform-independent.
●​ Images, videos, and audio can be added to a web page.
●​ Hypertext can be added to the text.

Creating and saving an HTML Document

1.​ Open a new Notepad document.

2.​ Write some HTML in the document.


3.​ Select File in the Notepad menu and then Save as to save the file.
4.​ Enter the name index.htm and select UTF-8 in the Encoding drop-down menu.
5.​ Use either .html or .htm for the extension. Don't save the file with a .txt extension.
6.​ Open the file in a browser by double-clicking on the file. You can also right-click and
choose Open with to view your work.
7.​ To make additions or changes to the web page, return to the saved Notepad file and make
the changes. Resave and then view your changes in a browser.

Document Layout of HTML Page

HTML layouts are the backbone of web pages, structuring content for user-friendly
navigation. They ensure organized presentation and enhance user experience. This guide
explores elements and techniques vital for crafting effective HTML layouts.

Understanding HTML Layouts

HTML Layout refers to the structure of a web page, achieved through elements
like <header>, <nav>, <main>, <article>, <section>, <aside> and <footer>. These elements help
organize content and define the page’s sections

Syntax:
<div class = "header"> Content... </div>
<div class = "section"> Content... </div>
<div class = "footer"> Content... </div>
Layout Components

Layouts Descriptions

The part of the front end which is used at the top of the page.
Header
<header> tag is used to add a header section on web pages.

The navigation bar is the same as the menu list. It is used to display the
Navigation bar content information using hyperlinks. <nav> tag is used to add the nav
section (nav elements) in web pages.

Index / It holds additional information or advertisements and is not always


Sidebar necessary to be added to the page.

Content The content section is the central part where content is displayed.
Section <main> tag is used to add the main content of the webpages.

The footer section contains the contact information and other query
Footer related to web pages. The footer section is always put on the bottom of
the web pages. The <footer> tag sets the footer on web pages.

Example: In this example we define a page layout with a header, navigation menu, body
section, and footer. It includes CSS styling for elements like headings, menu, and footer,
enhancing visual appeal and user experience.

<html>
<head>
<title>Page Layout</title>
<style>
.head1 {
font-size: 40px;
color: #009900;
font-weight: bold;
}
.head2 {
font-size: 17px;
margin-left: 10px;
margin-bottom: 15px;
}
body {
margin: 0 auto;
background-position: center;
background-size: contain;
}
.menu {
position: sticky;
top: 0;
background-color: #009900;
padding: 10px 0px 10px 0px;
color: white;
margin: 0 auto;
overflow: hidden;
}
.menu a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
/* .menu-log class is used to position the login link
on the right side of the menu bar */
.menu-log {
right: auto;
float: right; /* Floats the login link to the right */
}
footer {
width: 100%;
bottom: 0px;
background-color: #000;
color: #fff;
position: absolute;
padding-top: 20px;
padding-bottom: 50px;
text-align: center;
font-size: 30px;
font-weight: bold;
}
.body_sec {
margin-left: 20px;
}
</style>
</head>
<body>

<!-- Header Section -->


<header>
<div class="head1">
GeeksforGeeks
</div>
<div class="head2">
A computer science portal for geeks
</div>
</header>

<!-- Menu Navigation Bar -->


<nav class="menu">
<a href="#home">HOME</a>
<a href="#news">NEWS</a>
<a href="#notification">NOTIFICATIONS</a>
<!-- menu-log class to float it to the right -->
<div class="menu-log">
<a href="#login">LOGIN</a>
</div>
</nav>

<!-- Body section -->


<main class="body_sec">
<section id="Content">
<h3>Content section</h3>
</section>
</main>

<!-- Footer Section -->


<footer>Footer Section</footer>
</body>
</html>

HTML Elements
The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>

Examples of some HTML elements:


<h1>My First Heading</h1>
<p>My first paragraph.</p>

Start tag Element Content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none


Nested HTML Elements
HTML elements can be nested (this means that elements can contain other elements). All
HTML documents consist of nested HTML elements.
The following example contains four HTML elements (<html>, <body>, <h1> and <p>):
Example

<!DOCTYPE html>​
<html>​
<body>​
<h1>My First Heading</h1>​
<p>My first paragraph.</p>​
</body>​
</html>

Some Other Formatting Styles in HTML

Formatting elements were designed to display special types of text:

●​ <b> - Bold text


●​ <strong> - Important text
●​ <i> - Italic text
●​ <em> - Emphasized text
●​ <mark> - Marked text
●​ <small> - Smaller text
●​ <del> - Deleted text
●​ <ins> - Inserted text
●​ <sub> - Subscript text
●​ <sup> - Superscript text

Example
<em>This text is emphasized</em>
<small>This is some smaller text.</small>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>

Hypertext Links

Hyperlink, or simply a link, is a digital reference to data that the user can follow or be
guided to by clicking or tapping. A hyperlink points to a whole document or to a specific
element within a document. Hypertext is text with hyperlinks. The text that is linked from is
known as anchor text.

The document containing a hyperlink is known as its source document. Hyperlinks are
often used to implement reference mechanisms such as tables of
contents, footnotes, bibliographies and indexes.

HTML Links - Syntax

The HTML <a> tag defines a hyperlink. It has the following syntax:

​ <a href="url">link text</a>

●​ The most important attribute of the <a> element is the href attribute, which indicates the
link's destination.
●​ The link text is the part that will be visible to the reader.
●​ Clicking on the link text, will send the reader to the specified URL address.

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

By default, links will appear as follows in all browsers:


●​ An unvisited link is underlined and blue
●​ A visited link is underlined and purple
●​ An active link is underlined and red

Hyperlink Vs Hypertext

Hyperlink and hypertext are fundamental concepts in web technology. Hypertext refers
to text containing links to other text or media, enhancing navigation and information retrieval.
Hyperlinks are the actual links embedded in hypertext, directing users to different sections,
pages, or resources.
CSS:

Introduction:

●​ CSS is the abbreviation of “Cascading Style Sheets”.


●​ CSS is a simple design language intended to simplify the process of making web pages
presentable.
●​ CSS is designed to enable the separation of document content from document
presentation, including elements such as font, layout, and colors.
●​ The style definitions are usually saved in external .css files.
Features of CSS
CSS helps in better readability, flexibility in programming and accessibility.
CSS files are integrated in HTML documents thus:
●​ Internal CSS – is used as a style tag within the head tag. The advantage of this is the
ability to style three or four elements
●​ External CSS- is used to add external CSS file by using the <link>tag and will be
positioned in the head tag of the HTML file
●​ Inline CSS – can be counted as a better method to use as it will define properties for a
single tag like style attribute within any tag.

HTML vs. CSS:

HTML CSS
HTML is a markup language used to CSS is a style sheet language responsible
create static web pages and web for the presentation of documents written
applications. in a markup language.

Consists of selectors succeeded by a


Consists of tags surrounding content.
declaration mark. For Example:
For Example:
header{
<p>Welcome to Simplilearn</p>
background-color: green;

HTML cannot be used in a CSS file. CSS can be used in an HTML file.

It is used to build the structure of the It is used to make web pages more
web pages. presentable.

CSS Syntax and Style:


CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation
of a document written in HTML. Understanding CSS syntax is fundamental for creating visually
appealing and well-structured web pages. CSS syntax refers to the way we write CSS code. A
CSS rule consists of a selector and a declaration block.

●​ The selector points to the HTML element you want to style.


●​ The declaration block contains one or more declarations separated by semicolons.
●​ Each declaration includes a CSS property name and a value, separated by a colon.
●​ Multiple CSS declarations are separated with semicolons, and declaration blocks are
surrounded by curly braces.
Example

In this example all <p> elements will be center-aligned, with a red text color:

p {​
color: red;​
text-align: center;​
}

Example Explained

●​ p is a selector in CSS (it points to the HTML element you want to style: <p>).

●​ color is a property, and red is the property value

●​ text-align is a property, and center is the property value

A CSS selector selects the HTML element(s) you want to style.


CSS Selectors:

CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

●​ Simple selectors (select elements based on name, id, class)

●​ Combinator selectors (select elements based on a specific relationship between them)

●​ Pseudo-class selectors (select elements based on a certain state)

●​ Pseudo-elements selectors (select and style a part of an element)

●​ Attribute selectors (select elements based on an attribute or attribute value)

The CSS Element Selector

The element selector selects HTML elements based on the element name.

Example

Here, all <p> elements on the page will be center-aligned, with a red text color:

p {​
text-align: center;​
color: red;​
}

The CSS id Selector


●​ The id selector uses the id attribute of an HTML element to select a specific element.

●​ The id of an element is unique within a page, so the id selector is used to select one
unique element!

●​ To select an element with a specific id, write a hash (#) character, followed by the id of
the element.

Example

The CSS rule below will be applied to the HTML element with id="para1":

#para1 {​
text-align: center;​
color: red;​
}

Note: An id name cannot start with a number!

The CSS Class Selector:

●​ The class selector selects HTML elements with a specific class attribute.

●​ To select elements with a specific class, write a period (.) character, followed by the class
name.

Example

In this example all HTML elements with class="center" will be red and center-aligned:

.center {​
text-align: center;​
color: red;​
}

Cascading in CSS

Cascading is a fundamental concept in CSS (Cascading Style Sheets) that determines


how styles are applied to HTML elements. It refers to the order in which differ styles are
resolved, ensuring that the most relevant or specific style is used.

<html>
<head>
<style>
/* Internal Style */
.header {
color: blue;
}
</style>
</head>
<body>
<h1 class="header" style="color: red;">Hello, World!</h1>
</body>
</html>

Output:

The cascade takes an unordered list of declared values for a given property on a given
element, sorts them by their declaration's precedence, and outputs a single cascaded value. One
important benefit of cascading is that it offers development teams portability so they can move
existing applications without suffering the cost to rewrite them. Cascading applications run on
and can be ported between different platforms.
Style Attribute in CSS
The style attribute specifies an inline style for an element. The style attribute will
override any style set globally, e.g. styles specified in the <style> tag or in an external style
sheet.

Definition and Usage

The style attribute specifies an inline style for an element.

The style attribute will override any style set globally, e.g. styles specified in the <style> tag or
in an external style sheet.

Applies to

The style attribute is part of the Global Attributes and can be used on any HTML element.
Example

Use of the style attribute in an HTML document:

<h1 style="color:blue;text-align:center">This is a header</h1>​


<p style="color:green">This is a paragraph.</p>

Style Container

In web development and CSS (Cascading Style Sheets), "container" typically refers to an
HTML element or a CSS class used to group and structure content within a webpage. A "CSS
container" is not a specific term in CSS itself, but it generally refers to an HTML element or a
CSS class used to encapsulate and style content within a web page.

Containers are essential for creating organized and responsive web layouts. They help
control the placement and styling of elements within a webpage. Containers are a fundamental
concept in web design and development, as they allow you to structure and organize the layout
of your web page, apply consistent styling, and control how content is displayed.

Common Container-Types in CSS

There are 3 common container types:

●​ Block containers
●​ Inline containers
●​ Inline-block containers
Block containers take 100% width of their parent containers by default. We can set size of these
containers using width and height properties.
Ex: headings, paragraphs, div, nav, etc…

Inline containers won’t take space. They keep their size as small as possible (just wrapping
around the content inside). Web browsers treat these containers as text contents (words). We can
NOT set size of these containers.

Ex: links, span, etc…


Inline-block containers are special. Web browsers treat them as text contents but also allow us
set size of these containers using width and height properties.

Ex: buttons, images, etc…

Here is a detailed description of CSS containers:

●​ Structural Elements: Containers are HTML elements that serve as structural containers
for content. Common container elements include <div>, <section>, <header>, <footer>,
and <main>. These elements define sections or blocks of content within a webpage and
provide a structured way to group related elements.

●​ Styling and Layout Control: Containers often apply styling and layout properties to a
group of elements. You can define CSS classes or IDs for containers and apply styles to
them. This lets you control aspects such as width, height, margins, padding, background
colors, borders, and more.

●​ Responsive Design: Containers are crucial in creating responsive web designs that adapt
to different screen sizes and devices. By setting container widths as percentages or using
media queries, you can ensure that your content looks good on various devices, from
large desktop screens to small mobile devices.

●​ Nested Containers: You can nest containers within one another, creating a hierarchical
structure for your content. This allows you to organize content into multiple levels of
sections, each with its own styling and layout properties.

●​ Positioning: Containers can be used to control the positioning of elements on a webpage.


By setting the position property of a container to "relative" or "absolute," you can
precisely position child elements within the container.

●​ Centering Content: Containers often centre content horizontally and vertically on a


webpage. This is achieved by setting the margin property of a container to "auto" or
using CSS flexbox or grid layouts.

●​ Overflow Handling: Containers can control how content that exceeds their boundaries is
displayed. You can use properties like overflow to specify whether to add scrollbars, hide
the overflow, or expand the container to accommodate the content.
●​ Clearing Floats: When floating elements within containers, it's essential to clear floats
to prevent layout issues. You can use the clear property to ensure proper rendering.

CSS Properties:
Here are some commonly used CSS properties. A CSS property styles an aspect of an
HTML element. Here are a few examples:
<div style="border: 1px solid black;
font-size: 18px; "> Style This </div>
In this example, two CSS properties are applied to the div element: The border and the
font-size properties.
A CSS property declaration consists of a property name and a property value. The
property name comes first, then a colon, and then the value. Here is the general pattern a CSS
property declaration follows:
property-name: property-value
If you specify more than one CSS property, each name-value pair is separated by a
semicolon like this:
property1 : property-value1;
property2 : property-value2;
The last property declaration does not have to end with a semicolon, but it makes it easier
to add more CSS properties without forgetting to put in that extra semicolon.
There are many CSS properties you can specify for different HTML elements. These
CSS properties are covered in their own texts.
Background: Specifies the background color or image of an element.
●​ The color fills the space that is not covered by the image.
●​ url("/img/css/sunflowers.jpg") points to the background image.
●​ no-repeat specifies that the background image is not repeated.
●​ right places the background image to the right of the element.
Background color: Sets the background color.
.my-element {
​ ​ background-color: #f1f1f1; }
Background-image: Sets the background image.
.my-element {
​ background-image: url('image.jpg'); }
Color: Sets the color of the text.
.my-element {
​ color: #333333; }
Typography: Controls the font properties.
Font-Family: Specifies the font family.
.my-element {
font-family: Arial, sans-serif;
}
Font Size: Sets the size of the font.
.my-element {
font-size: 16px;
}
Font-Weight: Sets the thickness of the font.
.my-element {
font-weight: bold;
}
Font-style: Applies italic or oblique style to the font.
.my-element {
font-style: italic;
}
Border: Sets the properties of an element's border.
Border-Width: Specifies the width of the border.
.my-element {
border-width: 2px;
}
Border-Color: Sets the color of the border.
.my-element {
border-color: #cccccc;
}

Border-Style: Determines the style of the border (e.g., solid, dashed, dotted).
.my-element {
border-style: dashed;
}
Padding: Specifies the space between an element's content and border. Padding-top,
padding-right, padding-bottom, padding-left: Sets the padding for each side of the element.
.my-element {
padding: 10px 20px 15px 5px;
}

Element Box:

In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of:
content, padding, borders and margins. The image below illustrates the box model:

Explanation of the different parts:

●​ Content - The content of the box, where text and images appear

●​ Padding - Clears an area around the content. The padding is transparent

●​ Border - A border that goes around the padding and content

●​ Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between
elements.

Key Components of the box model

1. Content Area

●​ The content area is the central part of the CSS box model, containing the main
content (e.g., text, images, videos, or elements like <p> or <span>).

●​ It can be styled with CSS properties like height and width.

The content edge refers to the four edges of the content area

●​ Left content edge

●​ Right content edge


●​ Top content edge

●​ Bottom content edge

2. Padding Area

●​ The padding area is the space between the content and the border of an element.

●​ It includes the areas highlighted in light green and skin color in the example.

●​ The distance between the content edge and the border is the padding.

●​ The border marks the end of the padding area.

●​ The padding area contributes to the element’s total dimensions.

●​ Padding can be adjusted using CSS properties.

●​ It works similarly with box-sizing: content-box and box-sizing: border-box, but with
slight calculation differences.

3. Border Area

●​ The area that marks the end of an element is called as the border it is the outer fencing
for the element.

●​ The default border properties are provided in CSS to control the thickness of this outer
fencing.

●​ The border area also add ‘s up to the complete height and width of the element.

●​ The more the border width the more will be the height or width of the element.

●​ In the above image the area marked with skin color is called the border area.

4. Margin Area

●​ The area outside the border of an element is called the margin area.

●​ Basically this area depends on the parent of the element.

●​ The distance between the border of the parent element and the border of the child
element is called as the margin.

●​ CSS has provides certain margin properties to get control over this scenario.
Padding Property-Margin Property:

Understanding CSS padding and margin is fundamental for effective web design and
layout management. Both properties are essential for controlling the spacing and positioning of
elements on a webpage. In this article, we will explain the key differences between CSS padding
and margin, their respective uses, and how they can affect the layout and appearance of
elements.

What is Margin?

Margin is the space around an element. It is used to move an element up or down on a


page as well as left or right. Margins are completely transparent and do not have any background
color. They clear the area around the element, pushing adjacent elements away to create the
desired gap. Each side of the element can have a different margin size, which you can change
individually.

What is Padding?

Padding is the space between the element and the related content inside it. It determines
how elements look and sit within a container. Padding affects the container’s background around
the element and clears the area around the content. Increasing the padding size either grows the
element size or shrinks the content inside, with the element size increasing by default.

When to Use Margin and Padding?

1. Margin

Margins are used when you need to adjust the spacing between elements. For example, to
center an element horizontally within a fixed-width container, you can use margin: auto. Margins
are also ideal for setting the distance between adjacent elements.

Note: Margins are used to add spaces between an image and the description of that image.

CSS Padding is used if we want to create a space between an element and the edge of the
container or the border. It is also useful in the requirement of changing the size of the element.

CSS code:

.center {
margin: auto;
background: lime;
width: 66%;
}

.outside {
margin: 3rem 0 0 -3rem;
background: cyan;
width: 66%;
}
Complete Code

<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
background: lime;
width: 66%;

}
.outside {
margin: 3rem 0 0 -3rem;
background: cyan;
width: 66%;
}
</style>
</head>
<body>
<h2 style="color:green">
WELCOME
</h2>
<p class="center">
This element is centered.
</p>
​ <p class="outside">
The element is positioned outside of its corner.
</p>
</body>
</html>
Output:

CSS Margins

The CSS margin properties are used to create space around elements, outside of any
defined borders.

With CSS, you have full control over the margins. There are properties for setting the
margin for each side of an element (top, right, bottom, and left).

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:
●​ margin-top

●​ margin-right

●​ margin-bottom

●​ margin-left

All the margin properties can have the following values:

●​ auto - the browser calculates the margin

●​ length - specifies a margin in px, pt, cm, etc.

●​ % - specifies a margin in % of the width of the containing element

●​ inherit - specifies that the margin should be inherited from the parent element

Tip: Negative values are allowed.

Example

Set different margins for all four sides of a <p> element:

p {​
margin-top: 100px;​
margin-bottom: 100px;​
margin-right: 150px;​
margin-left: 80px;​
}
All CSS Margin Properties

2. Padding:
Padding is used to create space between the content of an element and its border. It is
useful when you want to control the internal spacing within an element and influence how the
element’s content sits within its container.
Note: When there is an increase in the padding value, the text will remain the same, but the
surrounding space will increase.
CSS code:
h4 {
background-color: lime;
padding: 20px 50px;
}
h3 {
background-color: cyan;
padding: 110px 50px 50px 110px;
}

Complete code:
<!DOCTYPE html>
<html>
<head>
<style>
h4 {
background-color: lime;
padding: 20px 50px;
}
h3 {
background-color: cyan;
padding: 110px 50px 50px 110px;
}
</style>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<h4>This element has moderate padding.</h4>
<h3>The padding is huge in this element!</h3>
</body>
</html>
Output:
Key Differences between Padding and Margin

You might also like