Scribd
Upload
7 views

HTML f Mod Short

Uploaded by

MASTER the BLASTER
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
7 views

HTML f Mod Short

Uploaded by

MASTER the BLASTER
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/ 14

HTML (HyperText Markup Language):

 The standard language for creating and designing web pages.


 Uses tags and attributes to structure content like headings, paragraphs, links, and images.
 Tags instruct browsers on how to display content.

Key Components:

 <!DOCTYPE html>: Declares the document as HTML5.


 <html>: The root element of the page.
 <head>: Contains meta-information (e.g., title).
 <title>: Sets the document's title (shown in the browser tab).
 <body>: Main content area (includes text, images, links).
 <h1>: The largest heading element (six levels from <h1> to <h6>).
 <p>: Defines a paragraph of text.

Here’s a simplified note on the history of HTML:

 HTML was invented by Tim Berners-Lee in the early 1990s at CERN to help researchers easily
share and access information.
 This led to the creation of the World Wide Web and HTML, a language to structure and format web
pages, including hyperlinks and content organization.
 HTML Timeline:
o HTML 1.0 (1993): The first version, focused on basic web page structure and links.
o HTML 2.0 (1995): Introduced new features like tables and forms, and became the standard
until 1997.
o HTML 3.0: Added more powerful features for webmasters, but made browsers more
complex.
o HTML 4.01 (1999): Improved support for multimedia and scripting, widely adopted and
successful.
o HTML 5.0 (2012): The current version, designed for modern web applications, with support
for multimedia, geolocation, offline use, and better compatibility across devices. It
emphasizes the use of semantic markup.
 SGML stands for Standard Generalized Markup Language. It is a system used to organize and
label files, and it forms the basis for other markup languages like HTML and XML.
 It was developed in 1986 by the International Organization for Standards (ISO) and is based on
an earlier system called GML (Generalized Markup Language).
 SGML helps create consistent formats for electronic documents by defining rules for using tags to
organize content.
 It is mainly used for handling large documents that need regular updates and can be published in
different formats.
 While SGML is important for professional publishing, it is not commonly used on personal
computers because it can be complex.

Key Points:

 It describes how different parts of a document relate to each other.


 It establishes rules for marking the start and end of sections within documents.
 It uses Document Type Definition (DTD) to explain the structure of a document in a way that
computers can understand.
Key Components:

 <EMAIL>: The root element that contains all the email content.
 <SENDER>: A child element that holds information about the sender of the email.
 <PERSON>: Nested inside <SENDER>, this element specifies details about the sender.
 <FIRSTNAME>: Contains the sender's first name (could be a placeholder).
 <BODY>: Contains the main content of the email.
 <p>: Represents a paragraph of text within the body.

Text Content:

 The message "A Computer Science Portal For Geeks" is the main content displayed in the email's
body.

Key Components:

 <!DOCTYPE html>: Declares the document as an HTML5 document.


 <html>: The root element that contains the entire HTML document.
 <head>: Contains meta-information about the document, such as:
o <meta charset="UTF-8">: Specifies the character encoding, ensuring correct text display.
o <title>: Sets the title of the document (shown in the browser tab).
o Additional links to stylesheets and scripts can be included here.
 <body>: The main content area of the HTML document, where visible elements like text, images,
links, and forms are placed.

Character Encoding:

 The <meta charset="UTF-8"> tag ensures that text is correctly encoded and displayed, supporting
various languages and special characters. Using UTF-8 improves compatibility and readability across
different devices.
Webpage Layout:

 <header> Element:
o Defines the top section of a webpage.
o Typically contains:
 Headings
 Navigation links
 Logos
 Other elements that help users understand the webpage's purpose.
 Navigation Menu:
o A set of links or buttons for users to navigate between different sections or pages of a
website.
o Usually located at the top of the webpage or in a sidebar.
o Enhances user experience by making it easy to browse and explore content.
 Content:
o Refers to all information on a webpage, including text, images, videos, and interactive
elements.
o Engages users and serves to inform, entertain, or guide them.
 Main Content:
o Core information and media central to a webpage.
o Aims to inform, engage, or entertain visitors.
 Footer:
o The bottom section of a webpage.
o Usually contains additional information, links, or navigational elements.

HTML Tags and Types

 HTML Tags: HTML tags are the building blocks used to create and organize content on web pages.
They are written inside angle brackets (< >) and help define different parts of a webpage.
 Types of HTML Tags:
1. Semantic Tags: These tags provide meaning about the content they contain, making it easier
for people and machines to understand the structure of the document. Some examples are:
 <header>: This tag is used for the header section of a webpage.
 <nav>: This tag is for navigation links.
 <section>: This tag defines a section of content.
 <article>: This tag is for a self-contained piece of content, like a blog post.
 <footer>: This tag is for the footer section of a webpage.
2. Non-Semantic (or Structural) Tags: These tags are mainly used for layout and formatting
and do not give specific meaning to the content. Examples include:
 <div>: This tag defines a division or section of a webpage.
 <span>: This tag defines a small piece of text within another element.
 <br>: This tag creates a line break in the text.
 <hr>: This tag adds a horizontal line to separate content.
 <table>, <tr>, <td>: These tags are used to create tables and their cells.

Additional HTML Tags

1. Text Formatting Tags:


o <strong>: Marks important text.
o <b>: Makes text bold.
o <i>: Italicizes text.
o <u>: Underlines text.
2. List Tags:
o <ul>: Creates an unordered (bulleted) list.
o <ol>: Creates an ordered (numbered) list.
o <li>: Defines an item in either an unordered or ordered list.
3. Link and Anchor Tags:
o <a>: Creates a hyperlink.
o href: Specifies the link's URL within the <a> tag.
4. Image Tag:
o <img>: Embeds an image in the document.
5. Form Tags:
o <form>: Creates a form for user input.
o <input>: Defines a control for user input.
o <button>: Creates a clickable button.
6. Meta Tags:
o <meta>: Provides metadata about the HTML document (like character set and description).
7. Table Tags:
o <table>: Defines a table.
o <tr>: Defines a row in a table.
o <th>: Defines a header cell in a table row.
o <td>: Defines a standard cell in a table row.
8. Sectioning Tags:
o <aside>: Contains content that is separate from the main content (like a sidebar).
o <figure>: Contains self-contained content (like images or diagrams).
o <figcaption>: Provides a caption for the content of the <figure>.
9. Media Tags:
o <audio>: Embeds sound content.
o <video>: Embeds video content.
10. Semantic Tags for Text Structure:

 <h1> to <h6>: Defines headings of different levels (with <h1> being the most important).

These tags are essential for organizing content, adding functionality, and improving the accessibility of web
pages. They enable developers to create engaging and informative web experience
Font Tag in HTML

 What is the <font> Tag?:


o The <font> tag in HTML was used to specify the font type, size, and color of text within a
document. It allowed developers to style text directly within the HTML markup.

Attributes of the <font> Tag:

 The <font> tag supported several attributes:


o face: Specifies the font family (e.g., Arial, Times New Roman).
o size: Sets the font size (with numerical values or keywords).
o color: Defines the text color (can be specified by name, hex code, or RGB values)

<p><font face="Arial" size="4" color="blue">This text uses the deprecated font tag.</font></p>

Deprecated: The <font> tag has been deprecated in HTML5, meaning it is no longer recommended for use. This is
because modern web design emphasizes separating content from presentation. Instead, CSS (Cascading Style Sheets)
should be used for styling text.

Font Types in Web Development

 In modern HTML, the use of <font> tags for styling text is deprecated, and CSS (Cascading Style
Sheets) is preferred for text styling. However, there are different types of fonts commonly used in
web development:

1. Serif: Fonts that have small lines or strokes at the ends of letters. Example: Times New Roman.
2. Sans-Serif: Fonts without the small lines at the ends of letters, offering a cleaner look. Example:
Arial.
3. Monospace: Fonts where each character occupies the same amount of horizontal space, often used
for coding. Example: Courier New.
4. Cursive: Fonts designed to resemble handwriting, giving a more personal touch. Example: Brush
Script.
5. Fantasy: Decorative or ornamental fonts, often used for artistic or creative purposes. Example:
Impact.
Paragraph formatting in HTML
Paragraph formatting in HTML refers to the various methods and techniques used to style and organize
paragraphs (<p>tags) to improve the readability, appearance, and overall layout of text on a webpage.
This can include adjusting text alignment, spacing, indentation, font styles, background colors, borders, and
other visual enhancements. Here are the key aspects of paragraph formatting
Metadata in HTML

 Definition: Metadata is data that provides information about other data. In HTML and web
development, it describes the content, structure, and attributes of a webpage. Although not visible to
users, metadata is crucial for search engines, browsers, and web services to understand and process
the webpage correctly.

Uses of Metadata in HTML

 Describing Content: Provides details about the webpage, like who wrote it, what it's about, and
important keywords.
 Setting Character Encoding: Tells the browser how to read and display the text correctly.
 Viewport Settings: Adjusts how the webpage looks on different devices, especially on mobile
phones.
 Search Engine Optimization (SEO): Helps search engines understand the webpage so they can
show it in search results.
 Social Media Integration: Gives information for social media sites to create rich previews when the
webpage is shared.
 Ensuring Proper Display: Improves how the webpage appears across various browsers and devices.

The <blockquote> Tag

 The <blockquote> tag is used to define a section of text that is quoted from another source. It
visually indicates that the content is a block quotation, typically by adding indentation on both the
left and right sides.
 Usage: This tag is often used for longer quotes to provide a clear distinction from regular text.

 Attributes:
o cite: This optional attribute specifies the URL of the source of the quotation. Using this attribute is
good practice as it helps indicate the origin of the quote, though it does not change how the quote
looks.
 Styling: The default appearance of the <blockquote> tag may vary across different browsers,
generally including some indentation. You can customize its styling using CSS to suit your design
preferences.

What is Hyperlinking?

 Definition: Hyperlinks are essential elements of web pages that enable users to navigate from one
web page to another or to different sections within the same page.
 Creation: Hyperlinks are created using the <a> (anchor) tag in HTML.
Types of Hyperlinks

 External Link: Links to a different website.


 Internal Link: Links to another page within the same website.
 Email Link: Opens the user's email client to send an email.
 Anchor Link: Links to a specific section within the same page
Key Attributes of the <a> Tag

 href: Specifies the URL of the page the link points to.
 target: Determines where to open the linked document:
o _self (default): Opens the link in the same tab.
o _blank: Opens the link in a new tab or window.
o _parent: Opens the link in the parent frame.
o _top: Opens the link in the full body of the window.
 title: Provides additional information about the link, displayed as a tooltip when the mouse hovers
over it.
o Example: <a href="https://www.example.com" title="Go to Example
website">Visit Example</a>
 rel: Specifies the relationship between the current document and the linked document. For instance,
rel="noopener noreferrer" enhances security when using target="_blank".

Key Points

 External Links: Use the full URL, including the protocol (e.g., https://), to link to external
websites.
 Internal Links: Use a relative path to link to other pages within the same website.
 Email Links: Use mailto: followed by the email address to create a link that opens the user's email
client.
 Anchor Links: Use the id attribute to create a target for the link, and reference it with a hash (#)
followed by the id in the href attribute.

Hyperlinks improve navigation on a website, making it easier for users to find and access content. Proper
use of hyperlinks enhances the usability and accessibility of a website.

The <link> Tag

 Definition: The <link> tag is used to link external resources, such as stylesheets or icons, to an HTML
document. Unlike the <a> tag, the <link> tag is an empty element and does not require closing tags.

Attributes of the <link> Tag

 rel: Specifies the relationship between the current document and the linked resource. Common
values include:
o stylesheet: Links to a CSS file.
o icon: Links to a favicon.
o alternate: Links to an alternate version of the document.
 href: Specifies the URL of the linked resource.
o Example: <link rel="stylesheet" href="styles.css">
 type: Specifies the type of the linked resource, typically text/css for stylesheets.
o Example: <link rel="stylesheet" href="styles.css" type="text/css">
 media: Specifies the media type for which the linked resource is designed (e.g., screen, print).
o Example: <link rel="stylesheet" href="print.css" media="print">

The <link> tag is essential for incorporating external styles and enhancing the design of web pages.
Comments in HTML

 Definition: Comments in HTML are used to add notes, explanations, or reminders within the code.
They are ignored by the browser and do not affect the page's display or structure.
 Purpose: Comments help in documenting the code, making it easier to understand, maintain, and
collaborate with others.

Best Practices for Comments in HTML

 Clear and Concise: Make sure your comments are easy to understand and to the point. They should
explain why you did something, not what you did, because the code itself should be clear enough.
 Regular Updates: Update your comments whenever you change the code. This keeps them accurate
and useful for anyone reading your code later.
 Avoid Overuse: Don’t use too many comments. Comments should help make your code easier to
read, not make it messy.

Following these practices helps keep your code clean and understandable

Whitespace in HTML

 Definition: Whitespace in HTML refers to spaces, tabs, and newlines. It helps organize code,
making it easier to read and understand.
 Types of Whitespace:
o Tabs (\t)
o Newlines (\n)
o Carriage returns (\r)

Tags for Managing Whitespace

1. <pre> Tag:
o The <pre> tag preserves spaces and line breaks in the text. It’s useful for displaying code, poetry, or
any text where formatting is important.
Horizontal Ruler in HTML

 Definition: A horizontal ruler in HTML is created using the <hr> tag. It is used to create a thematic break in
content, typically represented as a horizontal line. The <hr> tag is self-closing, meaning it does not require a
closing tag.

Customizing <hr> with Attributes

While using HTML attributes for styling is largely deprecated in favor of CSS, you can still apply some
basic attributes to customize the <hr> tag:

 width: Sets the width of the horizontal line.


 size: Sets the height (thickness) of the horizontal line.
 color: Sets the color of the horizontal line (not supported in HTML5).
Images in HTML

 Definition: In HTML, images are embedded in web pages using the <img> tag. This tag allows you to display
images from local files or online URLs.

Basic Usage of <img>

 The <img> tag is self-closing and requires two main attributes:


o src: Specifies the path to the image file (either a URL or a local path).
o alt: Provides alternative text that describes the image, displayed if the image cannot be

Attributes of <img>

 src: Specifies the URL or path to the image file.


 alt: Provides alternative text for the image if it cannot be displayed.
 width: Sets the width of the image (in pixels or percentage).
 height: Sets the height of the image (in pixels or percentage).
 title: Provides additional information about the image, shown as a tooltip on hover.
 loading: Determines if the browser should load the image immediately ("eager") or wait until it's in the
viewport ("lazy").

You might also like