Scribd
Upload
26 views

Head:: Begins With - and Ends With Every HTML Document Consists of A Head and A Body

The document summarizes basic HTML elements and tags. It explains that every HTML document has a head and body. The head contains metadata and the body contains visible content. It describes common tags like headings, paragraphs, links, images, lists, and basic text styling tags. It provides examples of how to implement these tags in HTML.

Uploaded by

Aryan Agarwala
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
26 views

Head:: Begins With - and Ends With Every HTML Document Consists of A Head and A Body

The document summarizes basic HTML elements and tags. It explains that every HTML document has a head and body. The head contains metadata and the body contains visible content. It describes common tags like headings, paragraphs, links, images, lists, and basic text styling tags. It provides examples of how to implement these tags in HTML.

Uploaded by

Aryan Agarwala
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Begins with - <!

DOCTYPE HTML>
And ends with </HTML>
Every HTML document consists of a head and a body.

Head:
Contains basic information such as title, etc.
<Head>
</Head>

There are several heading sizes-

<h1> - The CEO


<h2> - VP
<h3> - Director
<h4> - Middle management
<h5> - Lowly assistant
<h6> - Gets coffee for everyone

Title:
The title.
<Title>
</title>

Body:
Contains texts links tec.
<body>
</body>

Paragraphs:
<p>
</p>

Bold text:
<Strong>
</Strong>
The things inside the <>s are called tags

Hyperlinks:
<a href="http://www.codecademy.com">My Favorite Site!</a>

1.

First, there's an opening <a>tag and that tag has an attribute called href.
The href value tells your link where you want it to go, in this
casehttp://www.codecademy.com.

2.

Then you have a description of your link between your opening <a> and your
closing</a> tags. This is what you will be able to click on.

3.

Finally, you have your closing</a> tag.

Images:

<img src="http://s3.amazonaws.com/codecademyblog/assets/f3a16fb6.jpg" />

We use an image tag, like so:<img>. This tag is a bit different from the others.
Instead of putting the content between the tags, you tell the tag where to get the
picture using src. It's also different because there is no ending tag. It has / in the tag
to close it: <img src="url" />.

Check out the tag to the rightit adds a picture of a rubber duck to the page! (You
can see it by clicking on the Preview button.)
See the web address (or URL) after src=?
It's"http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" . That tells
the <img> tag where to get the picture from!
Every image on the web has its own image URL. Simply right-click on an image and
choose "Copy image URL." Paste that URL in quotes after src= to insert with
your <img> tag.

Ordered lists:
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<h1>List of my favorite things</h1>
<ol>
<li>Raindrops on roses</li>
<li>Whiskers on kittens</li>
<li>Bright copper kettles</li>
<li>Warm woolen mittens</li>
</ol>

</body>
</html>
Unordered lists:
<h2>Taco Ingredients</h2>
<ul>
<li>Cheese</li>
<li>Sour Cream</li>
</ul>

Comment:
<!--Yo -->
Font size change:
<p style=font-size= x px>
Color change:
<p style=color:red>
If you want to change both color and font then add a semi colon in between of them.
Font style change:

<h1 style="font-family: Arial">Title</h1>

Background color change:

<p style="background-color: red;">Hello!</p>

Aligning text:

<h1 style="text-align:center/right/left">

Making text bold:


Just surround the words/letters with <strong></strong>
Italisicing text:
Just surround the word/letter with <em></em>
To create a table:
<table></table>
To create table rows:
<tr></tr>
Table data:
<td></td>

You might also like