Bhavitha Cherukuri

Friday, October 27, 2023

The HTML meta Element

The HTML meta Element

The <meta> element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings.

The metadata will not be displayed on the page, but is used by browsers (how to display content or reload page), by search engines (keywords), and other web services.

Examples

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="John Doe">
</head>
<body>

<p>All meta information goes inside the head section.</p>

</body>

Setting The Viewport

The viewport is the user’s visible area of a web page. It varies with the device — it will be smaller on a mobile phone than on a computer screen.

You should include the following <meta> element in all your web pages:

This gives the browser instructions on how to control the page’s dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=0.1 part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Thursday, October 26, 2023

HTML — The Head Element

HTML — The Head Element

The HTML <head> element is a container for the following elements: <title>, <style>, <metal>, <link>, <script>, and <base>.

The HTML <head> Element

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.

HTML metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, scripts, and other meta information.

The HTML <title> Element

The <title> element defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.

The <title> element is required in HTML documents!

The content of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

The <title> element:

defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search engine-results

So, try to make the title as accurate and meaningful as possible!

A simple HTML document:

Example

<!DOCTYPE html>
<html>
<body>

<h2 title="I'm a header">The title Attribute</h2>

<p title="This is my website">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut voluptas voluptatum ea tempora nisi iusto, facilis laudantium odit aspernatur sunt doloribus delectus aliquid dolorum sequi vel assumenda neque officiis explicabo.</p>

</body>
</html>

The HTML <style> Element

The <style> element is used to define style information for a single HTML page:

Example

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style>
    body {background-color: hsl(62, 93%, 46%);}
    h1 {color: hsl(259, 92%, 39%);}
    p {color: hsl(323, 90%, 42%);}
  </style>
</head>  
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
  
<p>The content of the body element is displayed in the browser window.</p>
<p>The content of the title element is displayed in the browser tab, in favorites and in search-engine results.</p>

</body>
</html>

The HTML <link> Element

The <link> element defines the relationship between the current document and an external resource.

The <link> tag is most often used to link to external style sheets:

Example

Wednesday, October 25, 2023

HTML id Attribute

HTML id Attribute

The HTML id attribute is used to specify a unique id for an HTML element.

You cannot have more than one element with the same id in an HTML document.

Using The id Attribute

The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.

The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.

The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}.

In the following example we have an <h1> element that points to the id name "myHeader". This <h1> element will be styled according to the #myHeader style definition in the head section:

Example

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
} 
</style>
</head>
<body>

<h2>The id Attribute</h2>
<p>Use CSS to style an element with the id "myHeader":</p>

<h1 id="myHeader">My Header</h1>

</body>
</html>

Difference Between Class and ID

A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:

Example

<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Style all elements with the class name "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
} 
</style>
</head>
<body>

<h2>Difference Between Class and ID</h2>
<p>A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:</p>

<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>

<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>

HTML Bookmarks with ID and Links

HTML bookmarks are used to allow readers to jump to specific parts of a webpage.

Bookmarks can be useful if your page is very long.

To use a bookmark, you must first create it, and then add a link to it.

Then, when the link is clicked, the page will scroll to the location with the bookmark.

Example

First, create a bookmark with the id attribute:

Tuesday, October 24, 2023

Multiple Classes in HTML

Multiple Classes in HTML

HTML elements can belong to more than one class.

To define multiple classes, separate the class names with a space, e.g. <div class=”game main”>. The element will be styled according to all the classes specified.

In the following example, the first <h2> element belongs to both the game class and also to the main class, and will get the CSS styles from both of the classes:

Example

<!DOCTYPE html>
<html>
<head>
<style>
.game {
  background-color: hsl(9, 85%, 43%);
  color: white;
  padding: 10px;
} 

.main {
  text-align: center;
}
</style>
</head>
<body>

<h2>Multiple Classes</h2>
<p>Here, all three h2 elements belongs to the "game" class. In addition, koko also belongs to the "main" class, which center-aligns the text.</p>

<h2 class="game main">koko</h2>
<h2 class="game">kabaddi</h2>
<h2 class="game">throw ball</h2>

</body>
</html>

Different Elements Can Share Same Class

Different HTML elements can point to the same class name.

In the following example, both <h2> and <p> point to the "city" class and will share the same style:

Example

<!DOCTYPE html>
<html>
<head>
<style>
.game {
  background-color: hsl(119, 82%, 44%);
  color: white;
  padding: 10px;
} 
</style>
</head>
<body>

<h2>Different Elements Can Share Same Class</h2>

<p>Even if the two elements do not have the same tag name, they can both point to the same class, and get the same CSS styling:</p>

<h2 class="game">koko</h2>
<p class="game">koko is the game that is played during school competition</p>

</body>
</html>

Bhavitha Cherukuri

Friday, October 27, 2023

The HTML meta Element

Examples

Setting The Viewport

Thursday, October 26, 2023

HTML — The Head Element

The HTML <head> Element

The HTML <title> Element

Example

The HTML <style> Element

Example

The HTML <link> Element

Example

Wednesday, October 25, 2023

HTML id Attribute

Using The id Attribute

Example

Difference Between Class and ID

Example

HTML Bookmarks with ID and Links

Example

Tuesday, October 24, 2023

Multiple Classes in HTML

Example

Different Elements Can Share Same Class

Example

Building Static Website(part6) HTML Lists

Report Abuse