HTML
HTML stands for Hyper Text Markup Language.
HTML is the standard markup language for creating web pages.
HTML describe the structure of a web page.
HTML is not case sensitive i.e., <P> means the same as <p>.
HTML Boilerplate
This is the standard format or skeleton of writing HTML code.
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body></body>
</html>
<!DOCTYPE> Declaration
The <!DOCTYPE> declaration represent the document type of the web page.
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE html> declaration is for HTML5.
<html>
The <html> element is the root element of an HTML page.
<head>
The <head> element contain meta information about the HTML page.
<title>
The <title> element specifies the title for the HTML page.
<body>
The <body> element define the document body which contain such as headings, paragraphs, images,
lists, hyperlinks, tables etc.
HTML Tag
The component used to design the structure of website are called HTML tag.
Example
<p>…..</p> (It is a container tag which have both opening or closing tag)
<br> (It is an empty tag which have only opening tag)
HTML Element
The HTML element is defined by a opening tag, some content, and a closing tag.
Syntax- <tag name> Content goes here... </tag name>
Example
<h1> My First Heading </h1>
<p> This is a paragraph</p>
HTML Attributes
All HTML elements have attributes.
Attributes provide additional information about elements.
Attributes are always specified in the start tag.
Attributes usually come in name & value pairs like: - name=”value”
Example
<p style="color: red;">This is a red paragraph</p>
HTML Headings
The HTML heading represent the six level of section headings from <h1> to <h6>.
<h1> define the most important heading.
<h6> define the least important heading.
Example
<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 Comments
HTML Comments are used to add instructions and to hide content.
HTML Comments are not displayed in the HTML page.
Syntax- <!-- Write your comments here -->
Example
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
HTML Paragraphs
The <p> element define the paragraph.
A paragraph always starts from a newline and automatically add some margins before and after a
paragraph.
It is a container tag which requires a starting and an ending tag.
Example
<p>This is a paragraph</p>
<p>This is another paragraph</p
HTML Horizontal Rules
The <hr> element defines the horizontal rule.
The <hr> tag is used to add a horizontal rule or to separate content in a HTML page.
It is an empty tag which do not requires an ending tag.
Example
<h1>This is heading 1</h1>
<p>This is some text</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text</p>
<hr>
HTML Line Breaks
The <br> element defines the line break.
The <br> tag is used to break line without using starting a new paragraph.
Example
<p>This is<br>a paragraph<br>with line breaks</p>
HTML Style- CSS
Cascading Style Sheets is used to format the layout of a webpage. CSS is used to style the color,
font, size of the text, spacing between elements and many more.
Using CSS
CSS can be added to HTML document in 3 ways:
1. Inline- by using style attribute inside HTML elements.
Example
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
2. Internal- by using <style> element in the <head> section.
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>
3. External- by using <link> element in head section to link an external CSS file.
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>
background-color
The background-color property is used to defines the background color for an HTML element.
Example
<body style="background-color: powderblue;">
<h1>This is a heading</h1>
<p style="background-color: tomato;">This is a paragraph. </p>
</body>
color
The color property is used to defines the text color for an HTML element.
Example
<h1 style="color: blue;">This is a heading</h1>
<p style="color: red;">This is a paragraph. </p>
font-family
The font-family property defines the font to be used for an HTML element.
Example
<h1 style="font-family: verdana;">This is a heading</h1>
<p style="font-family: courier;">This is a paragraph. </p>
font-size
The font-size property is used to defines the text size for an HTML element.
Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph</p>
text-align
The text-alignment property is used to defines the horizontal text alignment for an HTML element.
Example
<h1 style="text-align: center;">Centered Heading</h1>
<p style="text-align: center;">Centered paragraph. </p>
font-style
The font-style property is used to defines the text should be style with a normal, italic, oblique.
Example
<h1 style=”font-style: normal;”>This is a heading</h1>
<p style=”font-style: italic;”>This is a paragraph. </p>
<h2 style=”font-style: oblique 40deg;”>This is a heading</h2>
font-weight
The font-weight property is used to defines the boldness of the font.
Example
<h1 style=”font-weight: bolder;”>The text is bolder</h1>
padding
The padding property defines a padding (space) between the text and the border.
Example
p{
border: 2px solid powderblue;
padding: 30px;
}
margin
The margin property defines a margin (space) outside the border.
Example
p{
border: 2px solid powderblue;
margin: 50px;
}
border
The border property defines a border around an HTML element.
Example
p{
border: 2px solid blue;
}
HTML Formatting Elements
Formatting elements are used to display special types of text.
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
<b>
The <b> element defines bold text, without any extra importance.
Example
<b>This text is bold</b>
<strong>
The <strong> element defines bold text with strong importance.
Example
<strong>This text is important! </strong>
<i>
The <i> element defines text to displayed in italic.
Example
<i>This text is italic</i>
<em>
The <em> element defines emphasized text, and the content is displayed in italic.
Example
<em>This text is emphasized</em>
<small>
The <small> element defines smaller text.
Example
<small>This is some smaller text. </small>
<mark>
The <mark> element defines text that should be marked or highlight.
Example
<p>Do not forget to buy <mark>milk</mark> today. </p>
<del>
The <del> element defines the text has been deleted from the document. Browser will display strike a
line on the deleted text.
Example
<p>My favorite color is <del>blue</del> red.</p>
<ins>
The <ins> element defines the text has been inserted into a document. Browser will display underline on
inserted text.
Example
<p>My favorite color is <del>blue</del> <ins>red</ins>. </p>
<sub>
The <sub> element defines the subscript text. Subscript appears the character below the normal line.
Subscript text can be used for chemical formulas.
Example
<p>This is <sub>subscripted</sub> text. </p>
<sup>
The <sup> element defines the superscript text. Superscript appears the character above the normal
line. Superscript text can be used for footnotes.
Example
<p>This is <sup>superscripted</sup> text. </p>
HTML Quotation
<blockquote>
The <blockquote> element defines a section that is quoted from another source.
Example
<p>Here is a quote from WWF's website:</p>
<blockquote>For 60 years, WWF has worked to help people and nature thrive. As the world's leading
conservation organization, WWF works in nearly 100 countries.></blockquote>
<q>
The <q> tag defines a short quotation. Browser normally insert a quotation mark around the quotation.
Example
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature. </q></p>
<abbr>
The <abbr>. tag defines an abbreviation or an acronym like “Dr.”, “ATM”, “Mr.”
Use the global attribute ‘title’ to show the description for the abbreviation when you move mouse over
the element.
Example
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948. </p>
<cite>
The <cite> tag defines the title for the creative work (e.g. book, poem, song, painting)
The text in the <cite> element displayed in italic.
Example
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
<address>
The <address> tag defines the contact information for the author/owner of the document or an article.
The text in the <address> element displayed in italic and always add a line break before and after the
<address> element.
Example
<address>
Written by John Doe<br>
Visit us at:<br>
Box 564, Disneyland<br>
USA
</address>
<bdo>
BDO stands for Bi- Directional Override.
The <bdo> tag is used to override the current text direction.
Example
<bdo dir="rtl">This text will be written from right to left</bdo>
<bdo dir="ltl">This text will be written from right to left</bdo>
HTML Hyperlinks
The <a> tag defines a hyperlink.
The most important attribute of the anchor element is the “href” attribute which indicates the links
destination.
Example
<a href="[Link] [Link]! </a>
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
HTML Links- The “target” attribute
The target attribute specifies where to open the linked document.
The target attribute has following values:
_self- by default opens the document in the same window/tab
_blank- open the document in a new window/tab
_parent- open the document in parent frame
_top- open the document in the full body of the window
Example
<a href="[Link] target="_blank">Visit W3Schools!</a>
Link “title” attribute
The title attribute specific extra information about an element. It shows a description when you move
mouse over the element.
Example
<a href="[Link] title="Go to W3Schools HTML section">Visit our HTML
Tutorial</a>
HTML Links - Use an Image as a Link
To use an image as a link just put the <img> tag inside the <a> tag.
Example
<a href="[Link]">
<img src="[Link]" alt="HTML tutorial" style="width:42px; height:42px;">
</a>
HTML Link to an Email Address
Use mailto: inside the href attribute to create a link that opens the user email program to send a new
email.
Example
<a href="[Link] email</a>
Button as a link
To use HTML button as a link you have to add some JAVA-Script code.
Example
<button onclick="[Link]='[Link]'">HTML Tutorial</button>
Creating Bookmark in HTML
Bookmarks can be useful if a web page is very long.
To create a bookmark- first create the id using the id attribute then add a link to the bookmark. When
the link is clicked the page will scroll down or up to the location with the bookmark.
Example
<h2 id=”C4”>Chapter4 </h2>
<a href=”#C4> Jump to Chapter 4</a>
HTML Images
The <img> tag is used to embed an image in a web page.
It is an empty tag.
The <img> tag has two attributes:
src- Specifies the path to the image.
alt- Specifies an alternate text for an image.
Example
<img src="img_chania.jpg" alt="Flowers in Chania">
Image Size- Width and Height
You can use the width and height attributes:
Example
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
We can use the style attribute to specify the width and height of an image.
Example
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px; height:600px;">
Animated Images
HTML allows animated GIFs:
Example
<img src="[Link]" alt="Computer Man" style="width:48px; height:48px;">
Image Floating
Use the CSS float property to let the image float to the right or to the left of a text.
Example
<p><img src="[Link]" alt="Smiley face" style="float:right; width:42px; height:42px;">
The image will float to the right of the text.</p>
<p><img src="[Link]" alt="Smiley face" style="float:left; width:42px; height:42px;">
The image will float to the left of the text.</p>
background-Image
To add a background image on an HTML use the HTML style attribute and the CSS background-image
property.
Example
<p style=”background-image:url(‘img_girl.jpg’);”>
background-repeat
To repeat the background image vertically and horizontally we use the background-repeat property.
Example
<style>
body {
background-image:url(‘img_girl.jpg’);
background-repeat: repeat;
}
</style>
background-size
The background-size property is used to specifies the background size of the image.
Example
< style>
body {
background-image:url(‘img_girl.jpg’);
background-repeat: no-repeat;
background-size:cover;
}
</style>
background-attachment
The background-attachment is used to specifies whether the background is fixed or scroll with content or
element.
Example
style>
body {
background-image:url(‘img_girl.jpg’);
background-repeat: repeat;
background-size:cover;
background-attachment:fixed;
}
</style>
HTML Image Maps
The <map> tag defines an image map.
It is a container tag.
An image map is an image with clickable areas. The areas are defined with one or more <area> tag.
To create an image map-
First insert image using <img> tag and must add a usemap attribute in <img>
-The usemap attribute value starts with a hash tag ( # ) followed by the name of the image map
and is used to create a relationship between the image and the image map.
Example
<img src=” [Link]” alt=”workplace” usemap=”#workmap”>
Then add a <map> element.
-The <map> element is used to create an image map and is linked to the image by using the
required name attribute.
-The name attribute must have the same value as the <img>’s usemap attribute.
Example
<map name=”workmap”>
Then add the clickable areas.
-A clickable area is defined using an <area> element and the coordinate of the area by using
shape & coords attributes.
-The shape of the clickable area can be choose by one of the one these value:
rect- define a rectangle region
circle- define a circular region
poly- define a polygonal region
default- define the entire region
-Then add a href attribute to link the destination of the page.
Example
<area shape=”rect” coords=”34, 44, 270, 350” href=”[Link]”>
Example
<img src=”[Link]” alt=”workplace” usemap=”#workmap”>
<map name=workmap”>
<area shape=”rect” coords=”34, 44, 270, 350” alt=”computer” href=”[Link]”>
<area shape=”rect” coords=”290, 172, 333, 250” alt=”Phone” href=”[Link]”>
<area shape=”circle” coords=”337, 300, 44” alt=”coffee” href=”[Link]”>
</map>