[go: up one dir, main page]
Scribd
Upload
20 views23 pages

HTML1 Short

This is best for psychology practitioners.

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
20 views23 pages

HTML1 Short

This is best for psychology practitioners.

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/ 23

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").
Use of Lists in HTML

Lists in HTML help organize information in a clear way, making it easier for people to read and understand.
They are often used to show steps, features, or definitions.

In HTML, there are three types of lists you can create:

1. Ordered List (<ol>): A list of items in a specific order, typically numbered.


2. Unordered List (<ul>): A list of items in no specific order, typically marked with bullets.
3. Description List (<dl>): A list of terms with their descriptions.

Types of Lists in HTML:

1. Ordered List (<ol>):


o Displays items in a specific order, typically numbered.
o Each item in the list is wrapped in <li> (list item).
o The <ol> tag in HTML is used to create an ordered list, where the items are displayed in a specific
order, typically numbered. Each item in the ordered list is represented using the <li> (list item) tag.

<ol type=”A”><li>-----------</li></ol>
Unordered List (<ul>):

 Displays items in no specific order, typically marked with bullets.


 Each item in the list is also wrapped in <li>.

or

  The <ul> tag is used to create an unordered list, where the items are displayed without any
specific order, typically marked with bullets.
  Each item in the unordered list is represented using the <li> (list item) tag.

Unordered HTML List - The Type Attribute

<ul type=”disc”><li>-----</li></ul>

The <dl> Tag in HTML

 The <dl> tag is used to create a description list, which consists of terms and their corresponding
descriptions.
 Each term in the description list is represented using the <dt> (description term) tag, while the
description for that term is represented using the <dd> (description data) tag.
The <table> Tag in HTML

 The <table> tag is used to create tables in HTML. Tables organize data into rows and columns, making it
easy to present information clearly.

Common Attributes for the <table> Element:

 border: Sets the thickness of the table's border (this is outdated).


 cellpadding: Specifies the space between the cell content and cell borders.
 cellspacing: Sets the space between the table cells.
 width: Defines how wide the table is.
 height: Defines how tall the table is.
 align: Controls the horizontal alignment of the table (left, center, right).
 bgcolor: Changes the background color of the table.
Tags Used Inside Table

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


 <th>: Creates header cells for the columns (usually bold and centered).
 <td>: Represents data cells where you can include content, such as text, images, lists, etc.

The <tr> tag


The <tr> tag is used to define a table row in an HTML table.

Each <tr> tag represents a new row in the table, allowing for the organization of data in a grid format.
The <th> Tag in HTML Tables

 The <th> (table header) tag is used to create a header cell in an HTML table. It typically defines the heading
for a column or a row, helping to clarify the data presented in the table.

Attributes of the <th> Tag

 colspan: This attribute can help merge one or more columns in a table,
 rowspan: This attribute can help merge one or more rows in a table.
 align: Specifies the horizontal alignment of the content within the header cell (left, center, right,
justify).
 valign: Specifies the vertical alignment of the content within the header cell (top, middle, bottom
 width: Sets the width of the cell (in pixels or percentage).
 height: Sets the height of the cell (in pixels or percentage).
 bgcolor: Sets the background color of the cell (deprecated in HTML5; use CSS instead).

The <td> Tag in HTML Tables


The <td> (table data) tag is used to create a data cell in an HTML table

Attributes of the <th> Tag

 colspan: This attribute can help merge one or more columns in a table,
 rowspan: This attribute can help merge one or more rows in a table.
 align: Specifies the horizontal alignment of the content within the header cell (left, center, right,
justify).
 valign: Specifies the vertical alignment of the content within the header cell (top, middle, bottom

 width: Sets the width of the cell (in pixels or percentage).

 height: Sets the height of the cell (in pixels or percentage).

 bgcolor: Sets the background color of the cell (deprecated in HTML5; use CSS instead).
HTML Forms

 The <form> tag in HTML is used to add forms to web pages.


 HTML forms are used to collect user input and submit it to a server for processing.
 Forms can contain various input elements like text fields, checkboxes, radio buttons, submit buttons, and
more.

Key Elements of HTML Forms

1. <input>: Used to create various types of input fields (text, password, checkbox, radio, etc.).
2. <textarea>: Creates a multi-line text input field for larger amounts of text.
3. <select>: Defines a dropdown list.
4. <button>: Represents a clickable button

Attributes of the <form> Tag

1. action:
o Description: Specifies the URL where the form data will be sent for processing.
o Example: <form action="/submit_form">
2. method:
o Description: Defines the HTTP method to be used when submitting the form. Common values are
GET and POST.
o Example: <form method="POST">
3. enctype:
o Description: Specifies how the form data should be encoded when submitted. Common values are
application/x-www-form-urlencoded, multipart/form-data, and text/plain.
o Example: <form enctype="multipart/form-data">
4. autocomplete:
o Description: Indicates whether the browser should attempt to automatically complete the form
values based on previously entered data. Possible values are on and off.
o Example: <form autocomplete="on">
5. target:
o Description: Specifies where to display the response after submitting the form. Possible values are
_self, _blank, _parent, _top, or a named iframe.
o Example: <form target="_blank">
6. name:
o Description: Assigns a name to the form, which can be useful when using JavaScript to reference the
form.
o Example: <form name="userForm">

Explanation:

 action: Specifies the URL /submit_form where the form data will be sent.
 method: Uses the POST method to submit the form data.
 enctype: Indicates that the form data will be sent as multipart/form-data (useful for file uploads).
 autocomplete: Allows the browser to suggest previously entered values.
 target: Opens the response in a new tab or window.
 name: Assigns the form a name of "userForm" for JavaScript referencing.

Commonly Used Input Types and Attributes

1. <input type="text">
o Purpose: Creates a single-line text input field.
o Attributes:
 name: Name of the input field.
 value: Default value.
 placeholder: Hint to the user.
 maxlength: Maximum number of characters.
 required: Makes the field mandatory.
2. <input type="password">
o Purpose: Creates a password input field where the text is obscured.
o Attributes: Same as text, plus:
 minlength: Minimum number of characters.
3. <input type="email">
o Purpose: Creates an input field for email addresses.
o Attributes: Same as text.
4. <input type="number">
o Purpose: Creates an input field for numeric values.
o Attributes:
 min: Minimum value.
 max: Maximum value.
 step: Interval between legal numbers.
 value: Default value.
5. <input type="checkbox">
o Purpose: Creates a checkbox.
o Attributes:
 checked: Checkbox checked by default.
 name: Name of the checkbox.
 value: Value sent to the server if checked.
6. <input type="radio">
o Purpose: Creates a radio button.
o Attributes:
 name: Name of the radio button group.
 value: Value sent to the server if selected.
 checked: Radio button selected by default.
7. <input type="submit">
o Purpose: Creates a submit button.
o Attributes:
 value: Text on the button.
8. <input type="reset">
o Purpose: Creates a reset button that resets all form values.
o Attributes:
 value: Text on the button.

Frames in HTML

In HTML, a "frame" is an element that was used to divide the browser window into multiple sections,

each sections capable of loading a separate HTML document.

This was achieved using the <frameset>, <frame>, and <noframes> elements.

However, it is important to note that the use of frames is now deprecated in HTML5, meaning it is no
longer recommended for use in modern web development.

Modern Alternatives

In modern web development, it is advisable to use:

 <iframe>: To embed another HTML document within the current page.


 CSS Flexbox/Grid: For creating responsive layouts without the use of frames.

Reason for Using <noframes>


The <noframes> tag is used to enhance accessibility.

If a browser does not support frames, the content within the <noframes> tag will be shown instead.

This guarantees that every user, no matter what type of browser they are using, can reach the important
information on the webpage.
Attributes of <frameset>

The <frameset> element in HTML is used to define a set of frames within a web page. Each <frameset>
element can contain one or more <frame> elements. Here are the attributes of the <frameset> element:

1. rows: Defines the number and size of rows in the frameset. The value can be specified in pixels, as a
percentage, or as relative lengths.
o Example: <frameset rows="50%, 50%">
2. cols: Defines the number and size of columns in the frameset. Similar to rows, the value can be
specified in pixels, as a percentage, or as relative lengths.
o Example: <frameset cols="200, *">
3. border: Specifies the width of the border between frames. This attribute is not widely supported and
should be avoided.
o Example: <frameset cols="200, *" border="5">
4. bordercolor: Sets the color of the border between frames. This attribute is also not widely
supported.
o Example: <frameset cols="200, *" bordercolor="#000000">
5. onload: Defines a JavaScript function to run when the frameset has finished loading.
o Example: <frameset cols="200, *" onload="myFunction()">
Attributes of <frame>

1. src: Specifies the URL of the document to be displayed in the frame.


o Example: <frame src="example.html">
2. name: Assigns a name to the frame, which can be used for targeting links.
o Example: <frame name="frame1" src="example.html">
3. scrolling: Specifies whether or not to display scrollbars.
o Values: yes, no, auto
o Example: <frame src="example.html" scrolling="yes">
4. noresize: Prevents the user from resizing the frame.
5. frameborder: Specifies whether or not to display a border around the frame.
o Values: 1 (display border), 0 (no border)
o Example: <frame src="example.html" frameborder="1">
6. marginwidth: Specifies the width of the margin between the frame's content and its left and right
edges.
o Example: <frame src="example.html" marginwidth="10">
7. marginheight: Specifies the height of the margin between the frame's content and its top and
bottom edges.
o Example: <frame src="example.html" marginheight="10">
8. title: Specifies extra information about the frame.
o Example: <frame src="example.html" title="This is a frame">

You might also like