HTML and CSS
HTML
- HTML, or Hypertext Markup Language, is the standard markup language used to create and design documents on the World Wide Web. It forms the backbone of web content by providing a structure for creating and organizing elements such as text, images, links, forms, and multimedia. HTML uses a system of tags and attributes to define the structure and presentation of content on web pages.
- Key points:
- Markup Language: HTML is a markup language, meaning it uses tags to annotate text and indicate how elements should be displayed on a web page.
- Structure: It provides a structural foundation for web documents, defining headings, paragraphs, lists, links, and other essential elements.
- Tags and Attributes: HTML consists of a set of tags (enclosed in angle brackets, like <tag>) that define specific elements, and attributes (additional information within tags) that modify the behavior or appearance of those elements.
- Web Standard: HTML is a key component of web standards, ensuring consistency and compatibility across different browsers and devices.
- Versioning: Different versions of HTML have been released over time, with HTML5 being the latest and most widely used version, offering enhanced features and support for modern web development.
HTML4 vs HTML5
- HTML4 was the fourth version of the Hypertext Markup Language, and it was introduced in 1997 by
the World Wide Web Consortium (W3C). It was widely used during the late 1990s and early 2000s,
playing a crucial role in the development of the early web. HTML4 introduced several features
that enhanced the capabilities of web pages, including tables for layout, forms, and scripting
through JavaScript.
- Key Features of HTML4:
- Introduction of tables for layout purposes.
- Support for forms and form elements.
- Basic support for scripting through JavaScript.
- Limited multimedia support.
- Lack of native support for audio and video elements.
- Dependency on plugins (like Flash) for rich multimedia content.
- Key Features of HTML4:
- HTML5 is the fifth and latest version of HTML, introduced by the W3C in 2014. It was designed to
address the shortcomings of HTML4 and accommodate the evolving needs of web development. HTML5
introduced new elements, attributes, and APIs, providing better support for multimedia, improved
semantics, and enhanced capabilities for creating modern web applications.
- Key Features of HTML5:
- Native support for audio and video elements, reducing dependency on plugins.
- New semantic elements (header, nav, article, section, etc.) for improved document structure.
- Introduction of the '<canvas>' element for drawing graphics and animations.
- Support for offline web applications through the Application Cache.
- Improved form controls and validation.
- Introduction of the '<svg>' element for scalable vector graphics.
- Enhanced accessibility features.
- Key Features of HTML5:
Doctype
- A Document Type Declaration, or DOCTYPE, is a specific instruction included at the beginning of an HTML document to tell the web browser which version of HTML the document is written in. It helps the browser render the content correctly by following the appropriate rules and specifications.
- In HTML4, there were three main types of DOCTYPE declarations: Transitional, Strict, and
Frameset.
- Transitional: In the Transitional era, developers often mixed content and design within HTML, using tags like <center>, <i>, <b>, <u>, and various font-related attributes to control layout and styling. This approach allowed for a smoother transition from older HTML versions, but it encouraged the use of deprecated and presentational elements for styling.
- Strict: The Strict DOCTYPE encouraged a cleaner separation of content and presentation. It discouraged the use of deprecated tags and attributes for styling and advocated for the adoption of CSS (Cascading Style Sheets) for layout and design. This approach led to more maintainable and semantically meaningful HTML documents, with styling moved to external CSS files.
- Frameset: The Frameset DOCTYPE was designed for creating web pages with frames, a feature that allowed multiple documents to be displayed within a single browser window. Each frame could contain a separate HTML document. Framesets were used for creating layouts with separate areas for navigation, headers, and content. However, frames became less popular due to usability issues, search engine challenges, and the rise of modern layout techniques.
- HTML5 is often considered equivalent to the strict mode of HTML4. In HTML5, there is a
simplified and universal DOCTYPE declaration:
<!DOCTYPE html>- HTML5 marked a significant shift in web development philosophy. It embraced the separation of concerns by recommending a single DOCTYPE (<!DOCTYPE html>) and promoting the use of CSS for styling. HTML5 introduced new semantic elements, like <header>, <nav>, <article>, <section>, and <footer>, which provide more meaningful structure to web documents. Deprecated elements were phased out, and modern features, such as the <iframe> tag for embedding content from other sources, replaced outdated practices like frames.
HTML structure
How to save html file?
Understanding HTML Structure
- DOCTYPE: It defines the document type and instructs the browser about the HTML version. It is crucial for programmers to identify the HTML version they are using.
- html tag (<html></html>): This tag informs the browser that it is an HTML document. Text between the html tags describes the web document and serves as the root or container for all other HTML elements, excluding the DOCTYPE.
- head tag (<head></head>): It should be the first element inside the html tag and contains metadata, which provides information about the document. The head tag must be closed before the body tag opens. Metadata, including title, character set, and linked stylesheets, helps in SEO and proper document interpretation.
- title tag (<title></title>): Used to add the title of the HTML page, which appears at the top of the browser window. It must be placed inside the head tag and should close immediately. While optional, it is essential for providing a meaningful title for the webpage.
- body tag (<body></body>): Text between the body tags describes the visible content of the page that is presented to the end user. This tag contains the main content of the HTML document, including text, images, links, and other elements.
- h1 - h6 tags: These tags are used to display headings of the webpage. h1 has the largest font size, and h6 has the smallest font size. They provide a hierarchy for organizing and structuring the content on the page.
- p tag (<p></p>): Text between the p tags describes a paragraph of the webpage. It is advisable to place multiple-line statements inside the p tag to ensure proper formatting and semantic structure in the HTML document.
Note: Essentially, HTML is comprised of tags, and these tags are opened and then closed with content or text placed between them. While all HTML tags are not necessarily paired with closing tags, there are two main types of tags in HTML:
- Paired (Open/Close) Tags: These tags have both an opening and a closing tag,
encapsulating content between them. An example is the paragraph tag:
<p>Content goes here</p>. The opening tag <p> signifies the beginning of the paragraph, and the closing tag </p> marks the end. - Self-Closing Tags: These tags are used when an element doesn't require any content, and they close themselves. An example is the line break tag: <br>. There is no need for a separate closing tag as it self-closes, indicating a line break without any content in between.
Features of HTML
- Easy and Simple Language: HTML is known for its simplicity, making it easy for beginners to learn and use. Its straightforward syntax and tag-based structure contribute to its accessibility.
- Effective Presentation: HTML provides a rich set of formatting tags that enable the creation of visually appealing and effective presentations. With tags for headings, paragraphs, lists, images, and more, HTML allows developers to structure content for a compelling user experience.
- Platform Independence: HTML is platform-independent, meaning it can be rendered and displayed consistently across different operating systems and devices. This universality contributes to its widespread adoption for creating content on the World Wide Web.
- Case Insensitive: HTML is a case-insensitive language, allowing developers to use uppercase or lowercase letters interchangeably when writing tags. However, for the sake of consistency and readability, it is recommended to write HTML tags in lowercase. This practice ensures uniformity and makes the code more accessible to collaborators and easier to maintain over time.
- Compatibility: HTML is compatible with other web technologies, such as CSS (Cascading Style Sheets) for styling and JavaScript for dynamic behavior. This interoperability allows developers to create interactive and visually appealing web pages by combining different technologies.
- Extensibility: HTML is extensible, meaning it can be augmented with additional features and functionalities. Through the use of attributes and custom elements, developers can extend HTML's capabilities to meet specific requirements.
- Global Adoption: HTML is a globally adopted standard for creating web content. Its widespread use ensures that web pages and applications built with HTML can be accessed and understood by a broad audience worldwide, contributing to the democratization of information on the Internet.
- Accessibility: HTML provides features and attributes that support accessibility, making web content more inclusive for users with disabilities. Semantic HTML elements, ARIA (Accessible Rich Internet Applications) roles, and attributes enhance the usability of websites and applications for all users.
- Evolution: HTML is a living standard that evolves over time. The introduction of new versions, such as HTML5, brings enhanced features, improved semantics, and better support for multimedia, keeping HTML at the forefront of modern web development.
img tag
<!DOCTYPE html>
<html>
<head><title>...</title></head>
<body>
<img src="path of image" alt="alternate text" width="400px" height="500px" />
<img src="path of image" alt="alternate text" width="350px" height="350px" />
</body>
</html>
- HTML img Tag: Used to display images on a webpage. It is an empty tag that contains attributes; closing tags are not used in the HTML img element.
Attributes of HTML img Tag:
- src: Stands for "source." It is a necessary attribute that specifies the source
or path of the image.
- It instructs the browser to find the image at the given location.
- The image may be located in the directory or on another server.
- alt: This alt attribute defines alternate text for the image if it cannot be
displayed.
- The value of the alt attribute is considered good for search engine optimization.
- width: An optional attribute used to specify the width for displaying the image. It is not recommended; you can apply CSS instead of the width attribute.
- height: This attribute also supports iframe, image, and object elements. It is not recommended; you can apply CSS instead of the height attribute.
a tag
- The 'a' tag in HTML is specifically known as the "anchor" tag. The anchor tag is used to create hyperlinks, allowing users to navigate from one page to another or to different sections within the same page.
<!DOCTYPE html>
<html>
<head>
<title>web page title</title>
</head>
<body>
<h1>Hyperlink</h1>
<a href="url of another page" target="_blank">click me</a>
<a href="https://www.example.com" target="_self">Visit Example Website</a>
</body>
</html>
- href Attribute in <a> Tag: The href attribute in the <a> (anchor) tag
stores the reference link, enabling users to navigate to different web pages, documents, or
resources.
- It defines the URL or path to the destination resource.
- It can point to various resources such as web pages, documents, images, or other online content.
- Commonly used in combination with the anchor tag to create hyperlinks.
- Target Attribute: The target attribute specifies how the linked resource should
be displayed when clicked. Common values include "_blank", "_self", "_parent", and "_top."
- Using
target="_blank"opens the linked resource in a new browser tab or window. - Using
target="_self"opens the linked resource in the same tab or window. - Using
target="_parent"opens the linked resource in the parent frame. If the link is inside an iframe, it will open in the parent document. - Using
target="_top"opens the linked resource in the full body of the window, removing all frames. - This attribute enhances user experience by controlling the behavior of link navigation.
- Using
- Types of <a> Tags: There are two main types of anchor tags: internal and
external.
- Internal Links: These links navigate within the same website or
document.
- Example:
<a href="#section1">Link to Section 1</a>(navigating to a specific section on the same page).
- Example:
- External Links: These links navigate to resources outside the current
website or document.
- Example: <a href="https://www.example.com">Visit Example Website</a> (navigating to an external website).
- Internal Links: These links navigate within the same website or
document.
Ordered lists, unordered lists, and definition lists
Ordered list: An ordered list is used to create a list of items that are sequentially numbered. The items are typically displayed with numbers or letters.
Example code:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
output:
- First item
- Second item
- Third item
Unordered list: An unordered list is used to create a list of items that do not have a specific order. The items are typically displayed with bullet points.
Example code:
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
Output:
- Item one
- Item two
- Item three
Definition List: A definition list is used to create a list of terms and their corresponding definitions. It is commonly used for glossaries or descriptions.
Example code:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JavaScript</dt>
<dd>A programming language for web development</dd>
</dl>
Output:
- HTML
- HyperText Markup Language
- CSS
- Cascading Style Sheets
- JavaScript
- A programming language for web development
Table
- The <table> tag is used in HTML to create a structured table for organizing data.
- Tags used inside the <table> tag:
- <tr>: Stands for "table row" and is used to define a row within the table.
- <th>: Stands for "table header" and is used to define header cells within a table row. Typically placed within a <thead> section.
- <td>: Stands for "table data" and is used to define standard cells within a table row. Typically placed within a <tbody> section.
- colspan and rowspan Attributes: These attributes are used in conjunction with
the <td> (table data) or <th> (table header)
elements to
control the spanning of columns (colspan) or rows (
rowspan) in a table.- colspan: This attribute defines the number of columns a cell should
span
horizontally. It allows a cell to extend across multiple adjacent columns within a
single
row.
- Example: <td>Spanning Two Columns</td> (This cell spans two columns in the same row.)
- rowspan: This attribute defines the number of rows a cell should span
vertically. It allows a cell to extend across multiple adjacent rows within a single
column.
- Example: <td rowspan="3">Spanning Three Rows</td> (This cell spans three rows in the same column.)
- colspan: This attribute defines the number of columns a cell should
span
horizontally. It allows a cell to extend across multiple adjacent columns within a
single
row.
-
cellspacing and cellpadding: These are attributes traditionally used in HTML
tables to control the visual spacing and padding within table cells.
- cellspacing: This attribute defines the space between adjacent cells in
a table. It sets the gap between cells, allowing for better visual separation.
- Example: <table cellspacing="10"> ... </table> (Defines a spacing of 10 pixels between cells.)
- cellpadding: This attribute sets the padding within each cell, creating
space between the content and the cell border.
- Example:
<table cellpadding="5"> ... </table> (Adds a padding of 5 pixels within each cell.)
- Example:
- cellspacing: This attribute defines the space between adjacent cells in
a table. It sets the gap between cells, allowing for better visual separation.
Creating a simple table structure
| movie data |
Movie name | Movie cast | IMDB Rating | |
|---|---|---|---|---|
| Ephemeral Echoes | James Anderson | Emily Thompson | 8.2 | |
| Whispers in the Mist | Daniel Rodriguez | Olivia Harris | 7.9 | |
| Serenade of Shadows | Michael Turne | Sophia Walker | 8.5 | |
<!-- Table Code -->
<table border="1px" cellspacing="2" cellpadding="10">
<tr>
<th rowspan="4">movie <br> data</th>
<th>Movie name</th>
<th colspan="2">Movie cast</th>
<th>IMDB Rating</th>
</tr>
<tr>
<td>Ephemeral Echoes</td>
<td>James Anderson</td>
<td>Emily Thompson</td>
<td>8.2</td>
</tr>
<tr>
<td>Whispers in the Mist</td>
<td>Daniel Rodriguez</td>
<td>Olivia Harris</td>
<td>7.9</td>
</tr>
<tr>
<td>Serenade of Shadows</td>
<td>Michael Turner</td>
<td>Sophia Walker</td>
<td>8.5</td>
</tr>
</table>
HTML Forms
- HTML forms provide a user interface for collecting data from users, enabling the input and submission of information to a server or another destination.
- Different tags used :
- form: The main container for all form elements. It is used to define the start and end of the form.
- label: This tag is used to associate a label with form elements, providing a user-friendly description for better accessibility and clarity.
- input (text): Used for single-line text input fields where users can type alphanumeric characters.
- input (radio): Represents a radio button, allowing users to select one option from a group of options.
- input (checkbox): Represents a checkbox, enabling users to select multiple options from a list of choices.
- select: Creates a dropdown menu, and it is often used with the nested option tag to define individual options within the menu.
- textarea: Provides a multi-line text input field, suitable for longer text entries or paragraphs.
- input (password): Similar to the text input, but it conceals the entered characters, commonly used for password input.
- input (submit): Creates a submit button, which users can click to send the form data to the server.
- input (reset): Creates a reset button, allowing users to reset the form fields to their default values.
- input (file): Enables users to upload files through the form, typically used for file submissions.
- input (number): Provides a numeric input field, often used for numerical data entry with options for setting minimum and maximum values.
- input (date): Allows users to select a date from a calendar input, useful for date-related information.
- input (email): Validates that the entered text is in an email format, commonly used for email address input.
- input (url): Validates that the entered text is in a URL format, often used for website address input.
Creating a login page
<form action="#" method="get">
<label>Username :</label>
<input type="text" name="uname" required>
<br>
<label>Password :</label>
<input type="password" name="pass" placeholder="Enter password" required>
<br>
<button type="submit">Login</button>
<input type="reset" value="Reset">
<input type="checkbox" checked="checked">Remember me
</form>
Understanding the Above Code:
- action="": This attribute specifies where the form data will be sent when the submit button is clicked. The value can be a URL or an empty string for the current page.
- method: The "method" attribute defines how the form data will be transferred.
There are two main types:
- GET: Data is appended to the URL, visible in the address bar. Suitable for non-sensitive data.
- POST: Data is sent in the request body, not visible in the URL. Suitable for sensitive or large amounts of data.
- name attribute in input: The "name" attribute associates a name with an input field, making it possible to reference and collect data from that specific input when the form is submitted.
- required attribute: When added to an input field, the "required" attribute ensures that the user must fill in that field before submitting the form. It helps enforce mandatory information.
- placeholder: The "placeholder" attribute provides a hint or prewritten text inside an input field, giving users guidance on what information is expected.
Creating a Registration Page
<form action="#" method="post" class="formdiv">
<label>First name :</label>
<input type="text" name="fname" required>
<br>
<label>Last name :</label>
<input type="text" name="lname" required>
<br>
<label>Course :</label>
<select name="course">
<option value="bca">BCA</option>
<option value="mca">MCA</option>
</select>
<br>
<label>Gender :</label>
<br>
<input type="radio" name="gen" value="male">Male <br>
<input type="radio" name="gen" value="female">Female <br>
<label>Address :</label><br>
<textarea name="address" cols="30" rows="10">Jilla - Nainital</textarea>
<br>
<label>Email :</label>
<input type="email" name="email" required>
<br>
<label>Password :</label>
<input type="password" name="pass" required>
<br>
<label>Retype Password :</label>
<input type="password" name="repass">
<br>
<input type="button" value="Submit">
</form>
HTML Frames
- HTML frames are utilized to partition your browser window into multiple sections, each capable of loading a separate HTML document.
- A collection of frames in the browser window is known as a frameset.
- The window is divided into frames in a similar way to how tables are organized into rows and columns.
- The `frameset` is a container tag within which `frame` tags are utilized to define individual frames.
- If you want to divide the page into rows, you can use the `rows` attribute. For example: <frameset rows="10%, 80%, 10%"></frameset> This creates three frame sections inside the frameset, occupying 10%, 80%, and 10% of the window height, respectively. You can also use the `cols` attribute for column division.
- To handle scenarios where frames are not supported by the browser, the `noframes` tag can be used. This tag allows displaying alternative text when frames are not supported.
- Framesets are supported in HTML4 but not in HTML5. Instead, HTML5 introduces the `iframe` element to achieve similar functionalities.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<frameset rows="30%, 40%, 30%">
<frame name="frame1" src="./page1.html"> <!-- These are separate html file located in the same location -->
<frame name="frame2" src="./page2.html">
<frame name="frame3" src="./page3.html">
<noframes>
<body>
<h1>Your browser does not support frames</h1>
</body>
</noframes>
</frameset>
</html>
