HTML
INTRODUCTION
SYNTAX:
<TAG>Content</TAG> //Always close tags after entering the content. Closing tags have the same
name but with “ / ” symbol at the start.
BASIC TAGS:
<!DOCTYPE html> //This tag implies that this is a html file
<html></html> //tag used to declare the start of a html document
<head></head> //tag used to provide more information about the
document(metadata). This info is separate from the contents of the
actual webpage.
<title>Parthib</title> //tag used to provide a title for the webpage
(is visible as the name of the browser tab)
<body></body> //tag used to define the start of the content visible in
the webpage
<h1>Parthib</h1> //tag used to define a heading
There are different variations of this tag ranging from 1-6:
<h2>Sayak</h2>
<h3>Numan</h3>
<h4>Rohit</h4>
<h5>Prince</h5>
<h6>Rishi</h6>
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisl ligula, placerat eget dui
quis, laoreet volutpat velit. Praesent imperdiet libero in viverra convallis. Curabitur interdum mi at
magna faucibus, in elementum nisl pellentesque. Curabitur malesuada id leo at lacinia. Sed quis
pellentesque nisi, vel hendrerit erat. Aliquam laoreet odio id magna auctor ultrices. Nam pretium
elementum turpis nec consectetur. Curabitur vel eros lacus.</p>
//The <p></p> tag is used to write paragraphs of text onto a webpage
example of a paragraph with a heading using <h> and <p> tags
Code:
HTML
ATTRIBUTES
SYNTAX:
<Tag AttributeName = “Value”>Content</Tag> //Make sure to always use Quotation marks for
Values.
WHAT ARE THEY USED FOR?
Attributes are used to provide and modify additional information about content in certain tags, for
example:
Changing the color of text in a paragraph using <p style=”color:red”><\p> (style attribute)
EMPTY TAGS
SYNTAX:
<Tag> //Empty tags don’t need closing tags in order to function
EXAMPLES:
<hr> //this tag is used to draw ending lines or separators
HTML
<br> //this tag is used to go to the next line while writing a paragraph
STYLES
The style attribute can be used to add styles to content in a tag, such as color(Name, RGB, SRGB),
font, size, and more
//This is a CSS attribute and uses CSS values so styles need to be separated by “;” within the
attribute.
EXAMPLES:
1. We can change the background colour of a heading using <h1 style=”background-color:
yellow”></h1>
HTML
2. We can change the font size of a paragraph using <p style=”font-size:50px”></p>
3. We can change the alignment of text in a paragraph using <p style=”text-align:center”></p>
HTML
FINAL:
CODE:
HTML
FORMATTING ELEMENTS
TAGS:
<b></b> //tags used to make text bold
<i></i> //tags used to make text italics
<mark></mark> //tags used to highlight text
<small></small> //tags used to make text smaller
<del></del> //tags used to slash through text
<abbr title=””></abbr> //tags used to define abbreviations. These mostly include the title attribute
to define these abbreviations.
COMMENTS:
<!—content-->
These are used to write information related to the code but don’t affect the webpage.
HYPERLINKS
SYNTAX:
<a href=”https://www.youtube.com/watch?v=dQw4w9WgXcQ”>Click/Tap me</a>
These are used to direct the viewer to a different page, image and websites. URLS can be both
Absolute (Web links) and Relative (local address)
EXAMPLE:
CLICK/TAP ME
Click/tap on the above hyperlink for some fun.
ATTRIBUTE:
You can use the “target” attribute to provide additional information on how these links will behave
Some of the values are:
_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
HTML
IMAGES
SYNTAX:
<img src=”image source” alt=”image name”> //Empty tag so it does not require an ending tag
This is used to insert images into a webpage.
ATTRIBUTES:
src – Image source
alt – Image name
style values:
width – adjust the width of the image
height – adjust the height of the image
EXAMPLE:
CODE:
HTML
FAVICON
This is the icon that is displayed on the tab beside the title
SYNTAX:
<link rel="icon" type="image/x-icon" href="/images/favicon.ico"> //This should be within <head> tag
The href url can be absolute and relative
EXAMPLE:
To put subhankar.jpg as our favicon
We put it in our root directory and then use:
<link rel="icon" type="image/x-icon" href="subhankar.jpg ">
Resulting in:
HTML
TABLES:
Create a table of data
SYNTAX:
<table> //initiate table
<tr> //Create a table row
<th></th> //display table header
<th></th>
<th></th>
</tr>
<tr>
<td></td> //display table column
<td></td>
<td></td>
</tr>
</table>
LISTS
Create a list of data
SYNTAX:
An unordered HTML list:
<ul> //initiate list
<li> </li> //list element
<li> </li>
<li> </li>
</ul>
An ordered HTML list:
<ol>
<li> </li>
<li> </li>
<li> </li>
</ol>
HTML
EXAMPLES:
DIV
Creates a new block with its own properties
SYNTAX:
<div></div>
EXPLANATION:
HTML
In the above website, each one of the blue boxes is a DIV. The website needs to be a collection of
DIVs for ease of styling and adding more elements.
DIVS can be nested within each other too.
