What is HTML?
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
Invention :
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
Example program :
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Save with any name (.html)
Elements:
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
The <br> tag defines a line break, and is an empty element without a closing tag:
HTML Headings: HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
Example
<html>
<head>
<title>Headings</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 3</h4>
<h5>This is heading 3</h5>
<h6>This is heading 3</h6>
</body>
</html>
HTML Paragraphs : HTML paragraphs are defined with the <p> tag:
Example:
<html>
<head>
<title>Paragraphs</title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML Links : HTML links are defined with the <a> tag:
Example:
<html>
<head>
<title> Links </title>
<body>
<a href="https://computergravity.blogspot.com/">Computer notes</a>
</body>
</head>
</html>
The src Attribute
The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:
Example
<html>
<head>
<title> Heading </title>
<body>
<img src="anu.jpg">
</body>
</head>
</html>
The width and height Attributes
The <img> tag should also contain the width and height attributes, which specify the width and height of the image (in pixels):
Example
<html>
<head>
<title> Heading </title>
<body>
<img src="anu.jpg" width="500" height="500">
</body>
</head>
</html>
The alt Attribute
The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to a slow connection, or an error in the src attribute, or if the user uses a screen reader.
Example
<html>
<head>
<title> Heading </title>
<body>
<img src="anu.jpg" alt="anushka image">
</body>
</head>
</html>
HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font, size, and more.
Background Color
The CSS background-color property defines the background color for an HTML element.
Example
Set the background color for a page to green:
<html>
<head>
<title>welcome</title>
<body style="background-color:green;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</head>
</html>
Set background color for two different elements:
Example :
<html>
<head>
<title>welcome</title>
<body style="background-color:green;">
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
</head>
</html>
Text Color
The CSS color property defines the text color for an HTML element:
Example
<html>
<head>
<title>welcome</title>
<body style="background-color:green;">
<h1 style="color:powderblue;">This is a heading</h1>
<p style="color:tomato;">This is a paragraph.</p>
</body>
</head>
</html>
Fonts
The CSS font-family property defines the font to be used for an HTML element:
Example
<html>
<head>
<title>welcome</title>
<body style="background-color:green;">
<h1 style="font-family:Algerian;">This is a heading</h1>
<p style="font-family:arial;">This is a paragraph.</p>
</body>
</head>
</html>
Text Size
The CSS font-size property defines the text size for an HTML element:
Example
<html>
<head>
<title>welcome</title>
<body style="background-color:green;">
<h1 style="font-size:100%;">This is a heading</h1>
<p style="font-size:300%;">This is a paragraph.</p>
</body>
</head>
</html>
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML element:
Example
<html>
<head>
<title>welcome</title>
<body style="background-color:green;">
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:right;">Centered paragraph.</p>
</body>
</head>
</html>
HTML Text Formatting
HTML <b> and <strong> Elements :
The HTML <b> element defines bold text, without any extra importance.
Example:
<b>This text is bold</b>
<strong>This text is important!</strong>
HTML <i> and <em> Elements :
The HTML <i> element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.
Tip: The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.
Example:
<i>This text is italic</i>
The HTML <em> element defines emphasized text. The content inside is typically displayed in italic.
Tip: A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.
Example:
<em>This text is emphasized</em>
HTML <small> Element:
The HTML <small> element defines smaller text:
Example:
<small>This is some smaller text.</small>
HTML <mark> Element:
The HTML <mark> element defines text that should be marked or highlighted:
Example:
<p>Do not forget to buy <mark>milk</mark> today.</p>
HTML <del> Element :
The HTML <del> element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text:
Example:
<p>My favorite color is <del>blue</del> red.</p>
HTML <ins> Element :
The HTML <ins> element defines a text that has been inserted into a document. Browsers will usually underline inserted text:
Example:
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
HTML <sub> Element :
The HTML <sub> element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O:
Example:
<p>This is <sub>subscripted</sub> text.</p>
HTML <sup> Element :
The HTML <sup> element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1]:
Example:
<p>This is <sup>superscripted</sup> text.</p>
HTML text formatting example program :
<html>
<head>
<title> Heading </title>
<body>
<b>COMPUTER</b> <br>
<strong>This text is important!</strong> <br>
<i>input</i> <br>
<em>output</em> <br>
<small> Central processing unit</small> <br>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<p>H<sub>2</sub>O</p>
<p>A<sup>2</sup></p>
</body>
</head>
</html>
HTML colors :
HTML borders: You can set the color of borders:
Example:
<html>
<head>
<title> Heading </title>
<body>
<h1 style="border:2px solid black;">Hello World</h1>
<h1 style="border:4px solid DodgerBlue;">Hello World</h1>
<h1 style="border:6px solid green;">Hello World</h1>
</body>
</head>
</html>
Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.
The following three <div> elements have their background color set with RGB, HEX, and HSL values:
Example codes :
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
Example :
<html>
<head>
<title> Heading </title>
<body>
<h1 style="background-color:rgb(255, 99, 71);">Welcome</h1>
<h1 style="background-color:#FF4500;">Color</h1>
<h1 style="background-color:hsl(222, 100%, 64%);">Theory</h1>
</body>
</head>
</html>
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:
Example
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
HTML Styles - CSS
CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
What is CSS?
Cascading Style Sheets (CSS) is used to format the layout of a webpage.
With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!
Internal CSS program
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS program
First.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
0 Comments