HTML FUNDAMENTALS...

What is HTML?

HTML stands for Hyper Text Markup Language.
HTML describes the structure of Web pages using markup.
HTML elements are the building blocks of HTML pages.
HTML elements are represented by tags.
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on.

HTML Tags -:

Tags is the important part of Hypertext Markup language.

HTML Tags give instruction a browser how to display the page content.
In other words, HTML Tag is one kind of command, how and what type content will display in the browser window.

HTML tags are english words written by angle brackets like <html>.

How to start-:
You need something for make a website. Bellow describe this:

    Editor
    Browser

Editor:

An HTML Editor is a application software for creating, editing and modifying web pages.
Although the HTML markup of a page can be written with any text editor, specialized HTML Editors can offer more visual writing features for web developers.

HTML Editors more features as like graphical authoring tools and content management systems make easy to write, edit and modify web pages.
HTML Editors give you features that aren't usually available in plain text editors.

Bellow some Text and HTML Editors List -:

    Notepad( a builtin text editor in Windows OS )
    Notepad++
    Macromedia Dreamweaver
    ConTEXT
    HTML Kit

HTML Syntax -:

A HTML document contains two distinct parts, the head and the body.
The head contains information about the document that is not displayed on the screen.
The body then contains everything else that is displayed as part of the web page.

HTML Tags -:

As told earlier, HTML is a markup language and makes use of various tags to format the content.

These tags are enclosed within angle braces <Tag Name>.

Except few tags, most of the tags have their corresponding closing tags.

For example, <html> has its closing tag </html> and <body> tag has its closing tag </body> tag etc.

<!DOCTYPE...> ==This tag defines the document type and HTML version.

<html>==This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>...</head> and document body which is represented by <body>...</body> tags.

<head>==This tag represents the document's header which can keep other HTML tags like <title>, <link> etc.

<title>==The <title> tag is used inside the <head> tag to mention the document title.

<body>==This tag represents the document's body which keeps other HTML tags like <h1>, <div>, <p> etc.

<h1>==This tag represents the heading.

<p>==This tag represents a paragraph.

HTML Headings -:

Headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

HTML Paragraph -:

<p> tag:

The <p> tag in HTML defines a paragraph.

These have both opening and closing tag.

So anything mentioned within <p> and </p> is treated as a paragraph.

Most browsers read a line as a paragraph even if we don’t use the closing tag i.e, </p>, but this may raise unexpected results.

So, it is both a good convention and we must use the closing tag.

Syntax-:

<p> Content </p>

HTML Links -:

Q.What is a link?

It is a connection from one web resource to another.

A link has two ends,An anchor and direction.

The link starts at the “source” anchor and points to the “destination” anchor,

which may be any Web resource such as an image, a video clip, a sound bite, a program,

an HTML document or an element within an HTML document.

HTML Link Syntax-:

Links are specified in HTML using the “a” tag.

<a href = "url">textlink</a>

EXAMPLE OF HTML LINKS -:

<!DOCTYPE html>

<html>

<h3>link example</h3>

<body>

<p>Click on the link</p>

<a href = "navdeepbca.blogspot.com">learn and grow</a>

</body>

</html>

OUTPUT -:

link example

click on the link

learn and grow

HTML IMAGES -:

Inserting Images into Web Pages-:

Images enhance visual appearance of the web pages by making them more interesting and colorful.

The <img> tag is used to insert images in the HTML documents.

It is an empty element and contains attributes only.

The syntax of the <img> tag can be given with -:

Setting the Width and Height of an Image-:

The width and height attributes are used to specify the width and height of an image.

The values of these attributes are interpreted in pixels by default.

style attribute in image -:

Using the HTML5 Picture Element- :

Sometimes, scaling an image up or down to fit different devices (or screen sizes) doesn't work as expected. Also,

reducing the image dimension using the width and height attribute or property doesn't reduce the original file size.

To address these problems HTML5 has introduced the <picture> tag that allows you to define multiple versions of an image to target different types of devices.

The <picture> element contains zero or more <source> elements, each referring to different image source, and one <img> element at the end.

Also each <source> element has the media attribute which specifies a media condition (similar to the media query) that is used by the browser to determine when a particular source should be used.

Let's try out an example -:

</picture>

HTML ELEMENTS-:

elements html

An HTML element is an individual component of an HTML (Hypertext Markup Language) document or web page.
HTML is composed of a tree of HTML nodes, such as text nodes.

Basic Elements -:

A text header, denoted using the <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tags.
A paragraph, denoted using the <p> tag.
A horizontal ruler, denoted using the <hr> tag.
A link, denoted using the <a> (anchor) tag.
A list, denoted using the <ul> (unordered list), <ol> (ordered list) and <li> (list element) tags.
An image, denoted using the <img> tag.
A divider, denoted using the <div> tag.

A text span, denoted using the <span> tag.

Empty html element -:

HTML elements with no content are called empty elements or empty tag. <br> is an empty element without a closing tag.
Empty elements can be "closed" in the opening tag like this: <br/>.

HTML5 does not require empty elements to be closed.

HTML Attributes -:

All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value".

The src Attribute -:
HTML images are defined with the <img> tag.

The filename of the image source is specified in the src attribute:

The width and height Attributes -:

HTML images also have width and height attributes, which specifies the width and height of the image:

The alt Attribute-:

The alt attribute specifies an alternative text to be used, if an image cannot be displayed.

The value of the alt attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a vision impaired person, can "hear" the element.

The style Attribute -:
The style attribute is used to specify the styling of an element, like color, font, size etc.

The lang Attribute -:
The language of the document can be declared in the <html> tag.

The language is declared with the lang attribute.

Declaring a language is important for accessibility applications (screen readers) and search engines:

The title Attribute -:
Here, a title attribute is added to the <p> element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph:

Use Lowercase Attributes -:

The HTML5 standard does not require lowercase attribute names.
The title attribute can be written with uppercase or lowercase like title or TITLE.

note::demands lowercase for stricter document types like XHTML

Quote Attribute Values -:
The HTML5 standard does not require quotes around attribute values.

The href attribute, demonstrated above, can be written without quotes:

Single or Double Quotes -:
Double quotes around attribute values are the most common in HTML, but single quotes can also be used.

In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:

What is comment tag in HTML?

comments in html

The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers.
You can use comments to explain your code, which can help you when you edit the source code at a later date.

Definition and Usage of comments -:
The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers.

You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code.

How to add comment In HTML-:
You can add comments in your HTML file using <! -- ... --> tag.
So if you will write anything between theses comment tag that will be treated as comment and browser will not read it.

syntax-:

<! -- Write commented text here -->

HTML Text Formatting -:

HTML Formatting Elements-:

In the previous chapter, you learned about the HTML style attribute.
HTML also defines special elements for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.

Formatting elements were designed to display special types of text -:

<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text

HTML <b> and <strong> Elements -:
The HTML <b> element defines bold text, without any extra importance.

Example -:

<b>This text is bold</b>

The HTML <strong> element defines strong text, with added semantic "strong" importance.

Example -:

<strong>This text is strong</strong>

HTML <i> and <em> Elements -:
The HTML <i> element defines italic text, without any extra importance.

Example -:

<i>This text is italic</i>

The HTML <em> element defines emphasized text, with added semantic importance.

Example -:

<em>This text is emphasized</em>

HTML <small> Element -:
The HTML <small> element defines smaller text:

Example -:

<h2>HTML <small>Small</small> Formatting</h2>

HTML <mark> Element -:
The HTML <mark> element defines marked/highlighted text:

Example -:

<h2>HTML <mark>Marked</mark> Formatting</h2>

HTML <del> Element -:
The HTML <del> element defines deleted/removed text.

Example-:

<p>My favorite color is <del>blue</del> red.</p>

HTML <ins> Element-:
The HTML <ins> element defines inserted/added text.

Example-:

<p>My favorite <ins>color</ins> is red.</p>

HTML <sub> Element -:
The HTML <sub> element defines subscripted text.

Example -:

<p>This is <sub>subscripted</sub> text.</p>

HTML <sup> Element -:
The HTML <sup> element defines superscripted text.

Example -:

<p>This is <sup>superscripted</sup> text.</p>

HTML Text Formatting Elements -:

Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text

_____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Styling HTML with CSS -:

CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.

CSS can be added to HTML elements in 3 ways -:

Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file.

The most common way to add CSS, is to keep the styles in separate CSS files.

However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.

Inline CSS-:

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

This example sets the text color of the <h1> element to blue -:

Example -:

<h1 style="color:blue;">This is a Blue Heading</h1>

Internal CSS -:

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element:

Example -:

<!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 -:

An external style sheet is used to define the style for many HTML pages.

With an external style sheet, you can change the look of an entire web site, by changing one file!

To use an external style sheet, add a link to it in the <head> section of the HTML page -:

Example-:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

An external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.

Here is how the "styles.css" looks -:

body {

background-color: powderblue;

}

h1 {

color: blue;

}

p {

color: red;

}

CSS Fonts -:

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

Example -:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color: blue;

font-family: verdana;

font-size: 300%;

}

p {

color: red;

font-family: courier;

font-size: 160%;

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

CSS Border -:

The CSS border property defines a border around an HTML element -:

Example -:

p {

border: 1px solid powderblue;

}

CSS Padding -:

The CSS padding property defines a padding (space) between the text and the border -:

Example -:

p {

border: 1px solid powderblue;

padding: 30px;

}

CSS Margin -:

The CSS margin property defines a margin (space) outside the border-:

Example -:

p {

border: 1px solid powderblue;

margin: 50px;

}

The id Attribute -:

To define a specific style for one special element, add an id attribute to the element -:

<p id="p01">I am different</p>

then define a style for the element with the specific id -:

Example -:

#p01 {

color: blue;

}

The class Attribute -:

To define a style for special types of elements, add a class attribute to the element-:

<p class="error">I am different</p>

then define a style for the elements with the specific class:

Example-:

p.error {

color: red;

}

External References -:

External style sheets can be referenced with a full URL or with a path relative to the current web page.

This example uses a full URL to link to a style sheet:

Example -:

Company Contact Country
abc cont india
abc1 cont1 Mexico
abc2 cont2 Austria
xyz contxyz UK
xyz1 contxyz1 Canada
xyz2 contxyz2

Defining an HTML Table -:

An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag.
A table header is defined with the <th> tag.

By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

Example-:

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

HTML Table - Adding a Border -:

Add caption

If you do not specify a border for the table, it will be displayed without borders.
A border is set using the CSS border property:

Example-:

table, th, td {
border: 1px solid black;
}

HTML Table - Collapsed Borders-:

If you want the borders to collapse into one border, add the CSS border-collapse property:

Example -:

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

HTML Table - Adding Cell Padding -:

Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.

To set the padding, use the CSS padding property -:

Example -:

th, td {
padding: 15px;
}

HTML Table - Left-align Headings-:

By default, table headings are bold and centered.
To left-align the table headings, use the CSS text-align property -:

Example -:

th {
text-align: left;
}

HTML Table -Adding Border Spacing -:

Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

Example -:

table {
border-spacing: 5px;
}

HTMLTable-Cells that Spam Many Columns -:

To make a cell span more than one column, use the colspan attribute:

Example-:

<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>

HTML Table - Cells that Span Many Rows -:

To make a cell span more than one row, use the rowspan attribute:

Example -:

<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>

HTML Table - Adding a Caption -:

To add a caption to a table, use the <caption> tag:

Example -:

<caption>Monthly savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

<tr>

<td>February</td>

</tr>

</table>

A Special Style for One Table -:

To define a special style for a special table, add an id attribute to the table:

Example -:

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Jackson</td>

</tr>

</table>

Now you can define a special style for this table:

table#t01 {

width: 100%;

background-color: #f1f1c1;

}

And add more styles -:

table#t01 tr:nth-child(even) {

background-color: #eee;

}

table#t01 tr:nth-child(odd) {

background-color: #fff;

}

table#t01 th {

color: white;

background-color: black;

}

HTML Lists -:

Example -:

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Unordered HTML List - Choose List Item Marker -:

The CSS list-style-type property is used to define the style of the list item marker -:

Value Description

disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

Example - Disc -:

<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Example - Circle-:

<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Example - Square -:

<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Example - None -:

<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Ordered HTML List -:

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default -:

Example -:

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Ordered HTML List - The Type Attribute -:

The type attribute of the <ol> tag, defines the type of the list item marker -:

Type Description

type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

Numbers -:

<li>Coffee</li>

</ol>

Uppercase Letters -:

<li>Coffee</li>

</ol>

Lowercase Letters -:

<li>Coffee</li>

</ol>

Uppercase Roman Numbers -:

<li>Coffee</li>

</ol>

Lowercase Roman Numbers -:

<li>Coffee</li>

</ol>

HTML Description Lists -:

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term -:

Example -:

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dd>- white cold drink</dd>

</dl>

Nested HTML Lists -:

List can be nested (lists inside lists) -:

Example -:

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>

</ul>

Control List Counting -:

By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute:

Example -:

<li>Coffee</li>

</ol>

Horizontal List with CSS -:

HTML lists can be styled in many different ways with CSS.

One popular way is to style a list horizontally, to create a navigation menu -:

Example-:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333333;

}

li {

float: left;

}

li a {

display: block;

color: white;

text-align: center;

padding: 16px;

text-decoration: none;

}

li a:hover {

background-color: #111111;

}

</style>

</head>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

Sunday 21 July 2019

What is HTML?

HTML Tags -: