HTML Basics

ROUGH VIEW OF HTML
1)WHAT IS HTML?
1.Hyper Text Markup Language

2.describes the structure of Web pages
3.elements are represented by tags and these elements are building blocks of html
pages
4.html5 was introduced in 2014
5. attributes are used to provide additional information about html tags.
6.attributes are always specified in the start tag.
7.attributes usually come in name and value pairs (name="value")
8.number of lines and spaces are ignored in html
tags
1.<!DOCTYPE html>-- declares the document is written in html5
it is not caase sensitive.

should be declared to help browsers to display content properly.
2.<html>-- root element
3.<head>--contains the meta information about the document
metadata is data about html document.
metadata is not displayed.
4.<title>-- contains the title of the document.
5.<body>--contains the visible page content
6.<h1>--largest heading
7<h6>--smallest heading
8.<p>-- paragaraph
9.<a>-- links are defined with <a> tag
<a href=" link"> w3 schools</a>

href is an attribute which specifies links destination
10.<img>--images can be displayed
<img src="image address" alt="w3schools" width="100" height="100">
src-- source file alt--alternative text if image is not displayed.
Some web sites store their images on image servers.
Actually, you can access images from any web address in the world:
Example
<img src="https://www.w3schools.com/images/w3schools_green.jpg"
alt="W3Schools.com">
11.lang attribute--declaring language attribute is important for screen readers and

search engines
<html lang="eng-US">
12.title attribute--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:
<p title="comment">dont press inser key 5 times</p>
13.style attribute--specifies inline css style for element
14.<hr>-- horizontal line
15.<br>-- used to produce line breaks
<p> hello <br>how are you<br>good morning</p>
o/p: hello
how are you
good morning
16.<pre>-- pre tag preserves both spaces and line breaks
<p> <pre>text is place here to preserves spaces and line breaks </pre> </p>
17.text-align:center makes the heading/paragraph centered.
18.text formatting tags
<b> </b>-- bold text

<i> </i>--italic text
<mark></mark>--highlighted text
<small></small>--small text
<del> </del>-- deleted text
<sub></sub>--subscripted text
<sup></sup>---superscripted text
19.<abbr>--</abbr>--elements define abbrevation(when cursor placed on abbrevation

is shown
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in

1948.</p>
20.address---<address> element defines contact information (author/owner) of a

document or an article.
The <address> element is usually displayed in italic. Most browsers will add a line
break before and after the element.
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
21.<bdo>--text is written in reverse order(reverses current text direction)
<bdo dir="rtl">This line will be written from right to left</bdo>
22.comments-- 
23.links--<a href="url">link text</a>

The href attribute specifies the destination address
(https://www.w3schools.com/html/) of the link.
The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text will send you to the specified address.
2)A local link (link to the same web site) is specified with a relative URL
(without http://www....).
Example:<a href="html_images.asp">HTML Images</a>
3)By default, a link will appear like this (in all browsers):
An unvisited link is underlined and blue

A visited link is underlined and purple
An active link is underlined and red
You can change the default colors, by using styles:
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
</style>
a:link--- default text displaying

a:visited-- link is already visited
a:hover-- when cursor is placed on the link
a:active-- when link was above to open
4)target attribute specifies where to open the linked document

_blank--opens the linked document in new window or tab
_Self--opens the linked doc in same window
_parent--opens the linked document in parent frame
_top--opens the linked doumnt as full window in same window
5)image as link
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;border:0;">
</a>
6)html bookmarks
bookmarks are used to allow readers to jump to specific parts of a Web
page.
Bookmarks can be useful if your webpage is very long.
To make a bookmark, you must first create the bookmark, and then add a link
to it.
When the link is clicked, the page will scroll to the location with the
bookmark.
First, create a bookmark with the id attribute:

<h2 id="C4">Chapter 4</h2>
Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same
page:
<a href="#C4">Jump to Chapter 4</a>
24) tables
table is defined in between<table> and </table>
each table row is defined between <tr> and </tr>
table heading is defined in between <th> and </th>
table data is defined in between <td> and </td>
If you do not specify a border for the table, it will be displayed without
borders.
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.
th, td {
padding: 15px;
}
Border spacing specifies the space between the cells.
table {
border-spacing: 5px;
}
To make a cell span more than one column, use the colspan attribute:
<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>
in the above example since 2 phone numbers are stored telephone column is
extended
-->Cell that spans two rows:

<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>
for heading above table

<caption>Monthly savings</caption>0
<tr>
<th> </th>
</tr>
25)unordered lists-- without numbers and contain/dos not contain bullet points
<ul> <li> </li></ul>
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
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
-->ordered list
listed items will be marked by the numbers by deafult
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
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
26) class attribute
The HTML class attribute makes it possible to define equal styles for
elements with the same class name.
Here we have three <div> elements that point to the same class name:
Example
<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital of England. It is the most populous city in the United
Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>
27)iframe--An HTML iframe is used to display a web pagw within a web page
<iframe src="demo_iframe.htm" height="200" width="300"></iframe>
remove the border--<iframe src="demo_iframe.htm"

style="border:none;"></iframe>
28)absolute path--full URL to an internet file:
Example
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
relative file path--file path points to a file in the images folder located at the
root of the current web:
<img src="/images/picture.jpg" alt="Mountain">
29)meta element
The <meta> element is used to specify which character set is used, page
description, keywords, author, and other metadata.
Metadata is used by browsers (how to display content), by search engines
(keywords), and other web services.
Define the character set used:
<meta charset="UTF-8">
Define a description of your web page:
<meta name="description" content="Free Web tutorials">
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
Define the author of a page:
<meta name="author" content="John Doe">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
30)Setting The Viewport

HTML5 introduced a method to let web designers take control over the viewport,
through the <meta> tag.
The viewport is the user's visible area of a web page. It varies with the device,
and will be smaller on a mobile phone than on a computer screen.
You should include the following <meta> viewport element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

A <meta> viewport element 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=1.0 part sets the initial zoom level when the page is first
loaded by the browser.
31)XHTML
32)in html form can be defined in between form tags

<form> </form>
form consists of different types of input elements like text
fields,checkboxes,radio buttons,submit buttons
<input type="text"> Defines a one-line text input field
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
<input type="radio"> Defines a radio button (for selecting one of many

choices)
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
<input type="submit">Defines a submit button (for submitting the form)
<input type="submit" value="Submit">
html5
css3
jquery
javascript
bootstrap
angular js
nodejs
react js

HTML Basics

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML Basics

Încărcat de

Drepturi de autor:

Formate disponibile

ROUGH VIEW OF HTML

1.Hyper Text Markup Language

1.<!DOCTYPE html>-- declares the document is written in html5

it is not caase sensitive.

2.<html>-- root element

3.<head>--contains the meta information about the document

metadata is data about html document.

metadata is not displayed.

4.<title>-- contains the title of the document.

5.<body>--contains the visible page content

9.<a>-- links are defined with <a> tag

<a href=" link"> w3 schools</a>

10.<img>--images can be displayed

<img src="image address" alt="w3schools" width="100" height="100">

src-- source file alt--alternative text if image is not displayed.

Some web sites store their images on image servers.

11.lang attribute--declaring language attribute is important for screen readers and

<p title="comment">dont press inser key 5 times</p>

13.style attribute--specifies inline css style for element

14.<hr>-- horizontal line

15.<br>-- used to produce line breaks

<p> hello <br>how are you<br>good morning</p>

16.<pre>-- pre tag preserves both spaces and line breaks

17.text-align:center makes the heading/paragraph centered.

18.text formatting tags

<b> </b>-- bold text

19.<abbr>--</abbr>--elements define abbrevation(when cursor placed on abbrevation

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in

20.address---<address> element defines contact information (author/owner) of a

21.<bdo>--text is written in reverse order(reverses current text direction)

<bdo dir="rtl">This line will be written from right to left</bdo>

22.comments--

23.links--<a href="url">link text</a>

Example:<a href="html_images.asp">HTML Images</a>

An unvisited link is underlined and blue

a:link--- default text displaying

4)target attribute specifies where to open the linked document

First, create a bookmark with the id attribute:

table is defined in between<table> and </table>

each table row is defined between <tr> and </tr>

table heading is defined in between <th> and </th>

table data is defined in between <td> and </td>

Border spacing specifies the space between the cells.

-->Cell that spans two rows:

for heading above table

<ul> <li> </li></ul>

disc Sets the list item marker to a bullet (default)

type="1" The list items will be numbered with numbers (default)

26) class attribute

<iframe src="demo_iframe.htm" height="200" width="300"></iframe>

remove the border--<iframe src="demo_iframe.htm"

28)absolute path--full URL to an internet file:

<img src="/images/picture.jpg" alt="Mountain">

Define the character set used:

Define a description of your web page:

<meta name="description" content="Free Web tutorials">

Define keywords for search engines:

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

Define the author of a page:

<meta name="author" content="John Doe">

Refresh document every 30 seconds:

<meta http-equiv="refresh" content="30">

30)Setting The Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">