Scribd
Upload
3 views

HTML

Jsjs

Uploaded by

noobgamerbbf000777
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

HTML

Jsjs

Uploaded by

noobgamerbbf000777
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

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.

You might also like