Scribd
Upload
4 views

HTML Notes

This document provides a comprehensive guide on creating and saving HTML documents, including the basic structure, essential tags, and attributes for formatting text and creating lists. It covers how to open HTML files in web browsers and explains various HTML elements such as headings, paragraphs, lists, and images. Additionally, it discusses the use of deprecated tags like <font> and emphasizes modern practices for web design.

Uploaded by

vijetabhatia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

HTML Notes

This document provides a comprehensive guide on creating and saving HTML documents, including the basic structure, essential tags, and attributes for formatting text and creating lists. It covers how to open HTML files in web browsers and explains various HTML elements such as headings, paragraphs, lists, and images. Additionally, it discusses the use of deprecated tags like <font> and emphasizes modern practices for web design.

Uploaded by

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

HTML(HYPER TEXT MARKUP LANGUAGE)

Creating and Saving an HTML Document

1. Open a Text Editor:

 Use a simple text editor like Notepad (Windows) or TextEdit (Mac). You can also use
more advanced editors like VS Code or Sublime Text.

2. Write Your HTML Code:

 Start by typing in the basic HTML structure. Here’s a simple example:

3. Save the HTML File:

 Save the document with an .html extension. For example, you could name
it index.html.

 In Notepad, go to File > Save As..., choose All Files in the “Save as type” dropdown,
and type index.html as the file name. Make sure you select UTF-8 encoding if
available.

Accessing a Web Page Using a Web Browser

1. Open Your Web Browser:

 Use any web browser like Google Chrome, Firefox, Safari, or Edge.

2. Open the HTML File:

 Drag and drop your saved index.html file into the browser window, or use the
browser’s Open File option:

o Chrome/Firefox/Edge: Press Ctrl+O (Windows) or Cmd+O (Mac), then


navigate to and select your index.html file.

o Safari: Use File > Open File... from the menu and select your HTML file.

3. View Your Web Page:

 Your browser will display the content of your HTML file. You should see the “Hello,
World!” heading and the paragraph text you created. This is your first web page!

In HTML, there are two different categories of tags −

 Empty

Empty tags are those that have no closing tags.

 <br> − It is used to insert a line break in a webpage wherever the


user wants.
 <hr> − It is used to insert a horizontal line wherever needed in the
webpage.

Container
Container tags have opening tag and a closing tag.

 <html>…</html

 <head>..</head>

 <title>..</title

 <body>..</body>

 <h1>…</h1> to <h6>…</h6>

 <p>….</p>

 <b>….</b>

 <i>…</i

HTML Tags

Here's a simple breakdown of the essential HTML tags: <html>, <head>, <title>, and <body>, along
with their roles and examples:

1. <html> Tag

 Purpose: This is the root element that wraps all the content on your web page. It tells the
browser that everything inside it is an HTML document.

2. <head> Tag

 Purpose: Contains metadata and other information about the document that isn’t displayed
directly on the web page. This includes the title, character set, and links to stylesheets.

3. <title> Tag

 Purpose: Sets the title of the web page, which appears in the browser's title bar or tab. It’s
crucial for search engines and user bookmarks.

4. <body> Tag

 Purpose: Contains the content of the web page that is visible to users, such as text, images,
links, and other elements.

 Example:

<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text on my web page.</p>
<a href="https://www.example.com">Visit Example</a>
</body>

Attributes OF BODY TAG: text, background, bgcolor, link, vlink, alink


1. text Attribute

 Purpose: This attribute was used to set the color of the text on the page

EXAMPLE <body text="RED’>

2. background Attribute

 Purpose: This attribute was used to set a background image for the entire page

 <body background="background-image.jpg">

3. bgcolor Attribute

 Purpose: This attribute was used to set the background color of an element.

Example:<body bgcolor="GREEN”>

4. link Attribute

 Purpose: This attribute was used to set the color of unvisited links. It is used within
the <body> tag.

5. vlink Attribute

 Purpose: This attribute was used to set the color of visited links. It is also used within
the <body> tag.

 Example:

6. alink Attribute

 Purpose: This attribute was used to set the color of active links (links that are clicked on). It is
used within the <body> tag.

 Example:

<body alink="RED"> <!-- Red color for active links -->

br (break), hr(horizontal rule), inserting comments, h1..h6 (heading)

Here’s a guide on how to use the <br> tag (line break), <hr> tag (horizontal rule), inserting
comments, and heading tags (<h1> to <h6>) in HTML:

<br> Tag (Line Break)

 Purpose: Inserts a line break in the text, moving the content that follows it to the next line.
This is useful for formatting text within paragraphs or creating space between lines.

 Example:<p>This is the first line.<br>This is the second line.</p>

o Result: The text “This is the second line.” appears below “This is the first line.” with a
line break in between.

2. <hr> Tag (Horizontal Rule)


 Purpose: Creates a horizontal line across the width of the page. It is used to separate content
or indicate a thematic break.

3. Inserting Comments

 Purpose: Adds notes or explanations within your HTML code that are not visible on the web
page. Comments are useful for documentation or leaving notes for yourself or others who
may read your code.

 Syntax:

<!-- This is a comment -->


 Example:

<p>This is a paragraph.</p>
<!-- The following section contains a horizontal rule -->
<hr>
<p>Another paragraph after the horizontal rule.</p>

o Result: The comment is visible only in the HTML source code, not on the web page.

4. <h1> to <h6> Tags (Headings)

 Purpose: Define headings of different levels, with <h1> being the highest (or most
important) and <h6> the lowest. These tags help organize content and improve readability.
They also play a role in SEO by indicating the structure of the content.

 Examples:

<h1>Main Heading</h1>
<h2>Subheading Level 1</h2>
<h3>Subheading Level 2</h3>
<h4>Subheading Level 3</h4>
<h5>Subheading Level 4</h5>
<h6>Subheading Level 5</h6>

o Result: Each heading level is displayed with decreasing size and importance. <h1> is
the largest and most prominent, while <h6> is the smallest.

p (paragraph), b (bold), i (italics), u (underline), ul (unordered list), ol (ordered list), and li (list item)

Here's a detailed guide on HTML tags for formatting text and creating lists:

1. <p> Tag (Paragraph)

 Purpose: Defines a paragraph of text. Browsers automatically add space before and after
each <p> element to separate it from other content.

 Example:

<p>This is a paragraph. It is used to display blocks of text with some space around it.</p>

2. <b> Tag (Bold)


 Purpose: Makes text bold. Note that the <b> tag is used for stylistic purposes, and it doesn’t
imply any semantic meaning. For emphasizing text with semantic meaning, use <strong>.

 Example:

<p>This is <b>bold</b> text.</p>

o Result: The word “bold” will appear in boldface.

3. <i> Tag (Italics)

 Purpose: Displays text in italics. Like <b>, the <i> tag is for styling purposes without adding
semantic meaning. Use <em> for emphasized text.

 Example:

<p>This is <i>italic</i> text.</p>

o Result: The word “italic” will appear in italics.

4. <u> Tag (Underline)

 Purpose: Underlines text. This tag is also used for styling rather than semantic meaning. For
semantic emphasis, use <ins> for inserted text.

 Example:

<p>This is <u>underlined</u> text.</p>

o Result: The word “underlined” will have a line underneath it.

5. <ul> Tag (Unordered List)

 Purpose: Creates a list of items with bullet points.

 Example:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
o Result: Displays a bulleted list:

o Item 1

o Item 2

o Item 3

Unordered List Attribute: type

1. type Attribute
 Purpose: Specifies the type of bullet for the unordered list. Possible values include:

o disc (default): Filled circle

o circle: Hollow circle

o square: Solid square

 Example:

<ul type="square">
<li>Item 1</li>
<li>Item 2</li>
</ul>
 Result: The list items will be displayed with square bullets:

o Item 1

o Item 2

6. <ol> Tag (Ordered List)

 Purpose: Creates a numbered list of items.

 Example:

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

o Result: Displays a numbered list:

1. First item

2. Second item

3. Third item

Attributes of ol (start, type), ul (type)

Attributes for Lists

1. Ordered List Attributes: start, type

1. start Attribute

 Purpose: Specifies the starting number of the ordered list. This is useful if you want
to begin numbering from a number other than 1.

 Example:
<ol start="3" TYPE=”a”>
<li>Item 1</li>
<li>Item 2</li>
</ol>

5.ITEM1
6.ITEM2
 Result: The list will start numbering from 5: 5. Item 1
6. Item 2

2. type Attribute

 Purpose: Defines the numbering type for the ordered list. Possible values include:

o 1 (default): Numeric (1, 2, 3, ...)

o A: Uppercase letters (A, B, C, ...)

o a: Lowercase letters (a, b, c, ...)

o I: Uppercase Roman numerals (I, II, III, ...)

o i: Lowercase Roman numerals (i, ii, iii, ...)

 Example:

<ol type="A">
<li>Item 1</li>
<li>Item 2</li>
</ol>

 Result: The list will be numbered with uppercase letters: A. Item 1


B. Item 2

7. <li> Tag (List Item)

 Purpose: Defines an item in a list. It is used inside both <ul> (unordered list)
and <ol> (ordered list).

 Example:

<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>

o Result: Each fruit will be listed as a bullet point item.

Description lists: dl, dt and dd,

Here’s a guide on HTML description lists and the attributes for ordered and unordered lists:

Description Lists: <dl>, <dt>, and <dd>

1. <dl> Tag (Description List)

 Purpose: Defines a description list, which is a list of terms and their descriptions.
This is used for creating glossaries, lists of definitions, or metadata.

 Example:

<dl>
<DT>COMPUTER
<DD>AN ELECTRONIC DEVICE
<DT>KEYBOARD
<DD>
</DL>
COMPUTER
AN HCSDHCBHDBCJBDS
KEYBOARD
BDHCBHBDCDHCHD
2. <dt> Tag (Description Term)
 Purpose: Specifies a term in the description list. This tag is used to define the term or
name being described.

 Example:

<dt>HTML</dt>

 Result: Displays “HTML” as the term to be described.

3. <dd> Tag (Description Detail)

 Purpose: Provides the description or definition for the term specified by


the <dt> tag.

 Example:

<dd>Hypertext Markup Language, the standard language for creating web pages.</dd>

 Result: Displays the description of the term “HTML”

Font Tags (attributes: face, size, color)

The <font> tag in HTML was used to style text with specific fonts, sizes, and colors. However, it's
considered obsolete in modern HTML and has been replaced by CSS for styling purposes. Here’s a
brief overview of the <font> tag and its attributes:

The <font> Tag

 Purpose: The <font> tag was used to define the font, size, and color of text. It allowed for
inline styling within HTML documents, but it’s no longer recommended for use in modern
web design.

Attributes of the <font> Tag

1. face Attribute

 Purpose: Specifies the font family to be used for the text. Multiple font names can
be provided as a fallback in case the first choice is unavailable.

 Example:

<font face="Arial, sans-serif">This is text in Arial font.</font>

2. size Attribute

 Purpose: Sets the size of the text. It can be a number from 1 to 7, where 1 is the
smallest and 7 is the largest. Alternatively, you can use relative sizes like +1 or -2 to
adjust the font size relative to the default size.

 Example:

<font size="4">This text is size 4.</font>

3. color Attribute
 Purpose: Defines the color of the text. It can be specified using color names,
hexadecimal values, or RGB values.

 Example:

Insert Images: img (attributes: src, width, height, alt), sup (super script), sub (subscript)

1. Inserting Images with <img> Tag

The <img> tag is used to display images on a web page. It is a self-closing tag, meaning it does not
need a closing tag.

 Attributes:

o src: Specifies the path to the image file. It can be a relative path or a URL.

o width: Defines the width of the image. Can be in pixels or percentage.

o height: Defines the height of the image. Can be in pixels or percentage.

o alt: Provides alternative text for the image if it cannot be displayed. This is important
for accessibility and SEO.

 Example:

<img src="https://www.example.com/image.jpg" width="300" height="200" alt="Description of the


image">

o Explanation:

o src="https://www.example.com/image.jpg": The URL of the image.

o width="300": The image width is set to 300 pixels.

o height="200": The image height is set to 200 pixels.

o alt="Description of the image": Provides a description for users who cannot


see the image.

2. Super Script with <sup> Tag

The <sup> tag is used to display text as superscript, which means the text appears slightly above the
baseline and is usually smaller.

 Example:

 X2 X<SUP>2</SUP>

E = mc<sup>2</sup></p>
o Result: Displays the “2” as superscript in the
equation E = mc².
3. Subscript with <sub> Tag

The <sub> tag is used to display text as subscript, meaning the text appears slightly below the
baseline and is usually smaller.

 Example:

<p>H<sub>2</sub>O</p>

o Result: Displays the “2” as subscript in the chemical formula H₂O.

Create a Table Using the Tags


Creating a table in HTML involves using several tags to define the table structure and its contents.
Here’s a guide on how to use the <table>, <tr>, <th>, <td>, rowspan, and colspan attributes to create
and customize a table.

1. Basic Table Structure

 <table>: Defines the table.

 <tr>: Defines a row in the table.

 <th>: Defines a header cell, which is bold and centered by default.

 <td>: Defines a standard data cell.

2. Using rowspan and colspan Attributes

 rowspan: Merges multiple rows into one cell.

 colspan: Merges multiple columns into one cell.

Example: Creating a Table

Here’s an example of an HTML table with header cells, data cells, and merged rows and columns:

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Example</title>
</head>
<body>
<h1>My HTML Table</h1>
<table border="1">
<!-- Table Header -->
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<!-- Table Row 1 -->
<tr>
<td>Row 1, Cell 1</td>
<td colspan="2">Row 1, Cell 2 (spans 2 columns)</td>
</tr>

<!-- Table Row 2 -->


<tr>
<td rowspan="2">Row 2 and 3, Cell 1 (spans 2 rows)</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>

<!-- Table Row 3 -->


<tr>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
</tr>

<!-- Table Row 4 -->


<tr>
<td>Row 4, Cell 1</td>
<td>Row 4, Cell 2</td>
<td>Row 4, Cell 3</td>
</tr>
</table>
</body>
</html>

Explanation

1. Table Header:

 <th> elements are used for headers. In this example, three header cells are defined
in the first row.

2. Row 1:

 The first cell uses <td> with colspan="2", merging two columns into one cell.

3. Row 2 and 3:

 The first cell in Row 2 uses rowspan="2", merging it with the cell directly below it in
Row 3.

4. Row 4:

 Standard cells are used without merging.

HTML Forms
HTML forms are essential for collecting user input on web pages. HTML Forms utilize
the <form> element as a powerful tool to collect user input through a variety of interactive controls.
These controls range from text fields, numeric inputs, email fields, password fields, to checkboxes,
radio buttons, and submit buttons. In essence, an HTML Form serves as a versatile container for
numerous input elements, thereby enhancing user interaction.

Syntax:

<form>
<!--form elements-->
</form>

HTML Forms Example

1. Basic HTML Forms Example:

Example: This HTML forms collects the user personal information such as username and password
with the button to submit the form.

<!DOCTYPE html>

<html lang="en">

<head>

<title>Html Forms</title>

</head>

<body>

<h2>HTML Forms</h2>

<form>

<label for="username">Username:</label><br>

<input type="text" id="username" name="username"><br><br>

<label for="password">Password:</label><br>

<input type="password" id="password" name="password"><br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

Output:
HTML Form

Here’s a breakdown of different form elements like textboxes, radio buttons, checkboxes,
passwords, lists, and combo boxes, along with examples for each:

1. Textbox

 Purpose: Allows users to enter single-line text.

 Tag: <input type="text">

 Attributes:

o name: Identifies the input.

o placeholder: Provides a hint about the expected value.

o value: Sets a default value.

 Example:

<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username">

o Explanation: Creates a textbox where users can type their username, with a
placeholder text indicating what to enter.

2. Radio Buttons

 Purpose: Allows users to select one option from a set of options.

 Tag: <input type="radio">

 Attributes:

o name: Groups radio buttons to ensure only one can be selected at a time.
o value: Represents the value sent when the form is submitted.

o checked: Specifies if the radio button is selected by default.

 Example:

<p>Select your gender:</p>


<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

o Explanation: Creates two radio buttons allowing the user to select either "Male" or
"Female."

3. Checkbox

 Purpose: Allows users to select multiple options from a set.

 Tag: <input type="checkbox">

 Attributes:

o name: Identifies the checkbox.

o value: Represents the value sent when the checkbox is checked.

o checked: Specifies if the checkbox is selected by default.

 Example:

<p>Select your interests:</p>


<input type="checkbox" id="coding" name="interests" value="coding">
<label for="coding">Coding</label><br>
<input type="checkbox" id="gaming" name="interests" value="gaming">
<label for="gaming">Gaming</label>

o Explanation: Creates checkboxes for "Coding" and "Gaming," allowing the user to
select one or both interests.

4. Password

 Purpose: Allows users to enter a password. The input is obscured for privacy.

 Tag: <input type="password">

 Attributes:

o name: Identifies the password field.

o placeholder: Provides a hint about what to enter.

 Example:

<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password">
o Explanation: Creates a password field where users can enter their password, and it
will be hidden with dots.

5. List (Dropdown Menu)

 Purpose: Allows users to select an option from a dropdown list.

 Tag: <select> combined with <option>

 Attributes:

o name: Identifies the dropdown list.

o <option>: Represents each option in the list.

o selected: Sets a default selected option.

 Example:

<label for="country">Choose your country:</label>


<select id="country" name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select>

o Explanation: Creates a dropdown list for selecting a country.

6. Combo Box (Dropdown with Text Input)

 Purpose: Allows users to select from a dropdown list or enter their own text.

 Tag: <input type="text"> combined with a <datalist>

 Attributes:

o list: Links the input to a <datalist>.

 Example:

<label for="city">City:</label>
<input type="text" id="city" name="city" list="cities">
<datalist id="cities">
<option value="New York">
<option value="Los Angeles">
<option value="Chicago">
</datalist>

o Explanation: Creates a textbox with a dropdown list of city options. Users can either
select from the list or enter their own city.

Putting It All Together

Here’s a simple HTML form that includes textboxes, radio buttons, checkboxes, a password field, a
dropdown list, and a combo box:
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Example</title>
</head>
<body>
<h1>Form Example</h1>
<form>
<!-- Textbox -->
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your
username"><br><br>

<!-- Radio Buttons -->


<p>Select your gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>

<!-- Checkboxes -->


<p>Select your interests:</p>
<input type="checkbox" id="coding" name="interests" value="coding">
<label for="coding">Coding</label><br>
<input type="checkbox" id="gaming" name="interests" value="gaming">
<label for="gaming">Gaming</label><br><br>

<!-- Password -->


<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your
password"><br><br>

<!-- Dropdown List -->


<label for="country">Choose your country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select><br><br>

<!-- Combo Box -->


<label for="city">City:</label>
<input type="text" id="city" name="city" list="cities">
<datalist id="cities">
<option value="New York">
<option value="Los Angeles">
<option value="Chicago">
</datalist><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Embed Audio and Video in a HTML Page


Embedding audio and video in an HTML page is straightforward with the <audio> and <video> tags.
Here’s a guide on how to use these tags to include multimedia content:

1. Embedding Audio

The <audio> tag is used to embed audio files in an HTML document. You can specify multiple audio
formats to ensure compatibility across different browsers.

 Attributes:

o src: Specifies the path to the audio file.

o controls: Adds playback controls (play, pause, volume) to the audio player.

o autoplay: Automatically starts playing the audio when the page loads (use with
caution as it can be intrusive).

o loop: Repeats the audio indefinitely.

 Example:

<h2>Listen to This Audio:</h2>

<audio src="audio/sample.mp3" controls>


Your browser does not support the audio
element.
</audio>

o Explanation: Embeds an audio file with playback controls. If the browser doesn’t
support the <audio> tag, the text "Your browser does not support the audio
element" is displayed.

2. Embedding Video

The <video> tag is used to embed video files. Like <audio>, you can include multiple video formats to
ensure compatibility.

 Attributes:

o src: Specifies the path to the video file.

o controls: Adds playback controls (play, pause, volume, fullscreen) to the video player.

o autoplay: Automatically starts playing the video when the page loads (use with
caution).
o loop: Repeats the video indefinitely.

o muted: Starts the video with the sound off.

o width and height: Defines the dimensions of the video player.

 Example:

<h2>Watch This Video:</h2>


<video src="video/sample.mp4" width="640" height="360"
controls>
Your browser does not support the video tag.
</video>
o Explanation: Embeds a video with playback controls and specified dimensions. If the
browser doesn’t support the <video> tag, the text "Your browser does not support
the video tag" is displayed.

HYPERLINKS
Links: Significance of Linking, anchor element (attributes: href, mailto), targets

Links are a fundamental part of the web, allowing users to navigate between pages and access
various resources.

1. Significance of Linking

Links, or hyperlinks, are essential for several reasons:

 Navigation: They allow users to move from one page to another or to different sections
within the same page, making navigation seamless.

 Access to Resources: Links can direct users to external websites, documents, or multimedia
resources.

 Improved User Experience: They provide a way to connect related content, helping users
find relevant information quickly.

Example: Clicking on a link to a tutorial page while reading an article about web design.

2. Anchor Element (<a> Tag)

The <a> element, also known as the anchor tag, is used to create hyperlinks. Here’s how you can use
it:

Attributes of the <a> Element:

 href: Specifies the URL or address the link points to.


o <a
Example:

href="https://www.example.com">Visit
Example</a>
o Explanation: This link directs users to "https://www.example.com" when clicked.

 mailto: Opens the default email client to send an email to the specified email address.

o <a href="mailto:[email protected]">Email
Example:

Us</a>
o Explanation: Clicking this link opens the user's email client with
"[email protected]" as the recipient.

 target: Specifies where to open the linked document.

o _self: Opens the link in the same frame or tab (default behavior).

o _blank: Opens the link in a new tab or window.

o _parent: Opens the link in the parent frame (if the page is within an iframe).

o _top: Opens the link in the full body of the window, replacing any frames.

o Example:

<a href="https://www.example.com" target="_blank">Open Example in New Tab</a>

Explanation: This link opens "https://www.example.com" in a new tab or window.

Putting It All Together

Here’s a simple HTML example that demonstrates how to use links:

<!DOCTYPE html>
<html>
<head>
<title>HTML Links Example</title>
</head>
<body>
<h1>Welcome to My Website</h1>

<!-- External Link -->


<p>Check out <a href="https://www.example.com" target="_blank">Example Website</a> for more
information.</p>

<!-- Email Link -->


<p>If you have questions, <a href="mailto:[email protected]">email us</a>.</p>

<!-- Internal Link -->


<p>Go back to the <a href="#top">top of this page</a>.</p>
<!-- Anchor Link (Internal) -->
<h2 id="top">Top of the Page</h2>
<p>Content at the top of the page.</p>
</body>
</html>

 Significance: Links help users navigate between web pages and access various online
resources.

 Anchor Element: Use the <a> tag to create links.

o href: Specifies the link’s destination.

o mailto: Opens the email client.

o target: Defines where the link will open (same tab, new tab, etc.).

Understanding these basics allows you to create effective and user-friendly links in your web pages.

Cascading Style Sheets (CSS)


What is CSS?

Cascading Style Sheets (CSS) are used to style and layout web pages. They control the look and feel
of HTML elements, making web pages not only functional but also visually appealing. CSS,
or Cascading Style Sheets, is a language used to style and enhance websites. It controls how HTML
elements such as text, images, and buttons—are displayed on a webpage.

With CSS, you can adjust font sizes and colors, add backgrounds, and manage the layout,
transforming a basic webpage into a visually appealing and user-friendly experience. CSS also
simplifies layout management across multiple web pages by using external stylesheets stored in CSS
files.

Here’s a basic introduction to key CSS properties and how they can be applied:

1. Introduction to CSS

CSS is a language used to describe the presentation of a document written in HTML or XML. It allows
you to:

 Change Colors: Set text, background, and border colors.

 Adjust Layouts: Control the size, spacing, and positioning of elements.

 Apply Fonts: Set font families, styles, and sizes.

 Style Elements: Customize borders, margins, and more.

Basic CSS Example

In this example, we will use all of them with different properties.

HTMLCSS

<!-- File name: index.html -->


<!DOCTYPE html>

<html>

<head>

<!-- Importing External CSS -->

<link rel="stylesheet" href="style.css" />

<!-- Using Internal CSS -->

<style>

h2 {

color: green;

</style>

</head>

<body>

<!-- Using Inline CSS -->

<h2 style="text-align: center;">Welcome To GFG</h2>

<p>CSS Tutorial - GeeksforGeeks</p>

</body>

</html>

OUTPUT:

Output after applying CSS

2. Key CSS Properties

 color: Sets the color of text.

o Example: color: #333; (Dark grey text)

 background-color: Sets the background color of an element.

o Example: background-color: #ffcc00; (Yellow background)


 border-style: Defines the style of the border (solid, dashed, dotted, etc.).

o Example: border-style: solid; (Solid border)

 margin: Sets the space outside an element's border.

o Example: margin: 20px; (20px space around the element)

 height: Defines the height of an element.

o Example: height: 100px; (100 pixels high)

 width: Defines the width of an element.

o Example: width: 200px; (200 pixels wide)

 outline: Adds an outline around an element, outside of its border.

o Example: outline: 2px solid red; (2px solid red outline)

 font-family: Specifies the font type.

o Example: font-family: 'Times New Roman', serif; (Times New Roman font)

 font-style: Sets the style of the font (normal, italic, oblique).

o Example: font-style: italic; (Italic text)

 font-size: Sets the size of the font.

o Example: font-size: 18px; (18 pixels font size)

 text-align: Aligns the text inside an element (left, right, center, justify).

o Example: text-align: center; (Centered text)

 float: Allows an element to float to the left or right of its container, enabling text to wrap
around it.

o Example: float: left; (Floats the element to the left)

3. Practical Application

Here’s a practical example to see how these properties are used in context:

<!DOCTYPE html>
<html>
<head>
<title>CSS Properties Example</title>
<style>
.container {
width: 100%;
background-color: #f9f9f9;
padding: 20px;
}
.box {
width: 150px;
height: 150px;
background-color: #3498db;
border: 3px solid #2980b9;
margin: 10px;
padding: 10px;
color: white;
font-family: 'Arial', sans-serif;
font-size: 18px;
font-style: italic;
text-align: center;
float: left;
}
.box:last-child {
background-color: #e74c3c;
border-style: dashed;
outline: 4px solid #c0392b;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
</div>
</body>
</html>

 CSS: Styles HTML elements to enhance web page appearance.

 Properties: Control text color, background, borders, margins, sizes, fonts, and layout.

 Usage: Apply CSS in <style> tags or external stylesheets to format and design web pages
effectively.

You might also like