2. We will use text editor for coding our HTML for website. To do this we
will use very popular text editor- Notepad.
1. Open a text editor- Notepad.
2. Choose „New‟ option from file menu.
3. Write the HTML content, I will guide you in writing content and
introduce with parts of HTML document later in this presentation.
4. Save the File with .html or .htm extension. For ex- Hello.html or
Hello.html
5. Run it in browser and see the result.
4. The DOCTYPE declaration defines the document type
The text between <head> and </head> describes <title> and
</title>.
The text between <html> and </html> describes the web
page
The text between <body> and </body> is the visible page
content
6. To define Headings in HTML, we use <h1> to <h6> tags.
The headings tags are container tags which needed to be closed.
For ex- <h1>This is heading 1</h1>
<h1> is the highest size and <h6> is the lowest size of headings.
This is Explained well in the image below
7. In a word processing softwares like Microsoft Office Word, we use
Enter to create a new paragraph. But HTML doesn‟t recognise this,
to do so you have to use a paragraph tag <p> for starting new
paragraph.
The line break tag <BR> forces a line break without leaving a
vertical space. It is different from <p> tag in the sense that it
forces text to a new line, but without inserting a blank line. It does
not require closing tag.
This empty line is
because of <p>
tag
Here we used
<br> tag and
there is line
break.
8. In a word processing softwares like Microsoft Office Word, we use
Enter to create a new paragraph. But HTML doesn‟t recognise this,
to do so you have to use a paragraph tag <p> for starting new
paragraph.
The line break tag <BR> forces a line break without leaving a
vertical space. It is different from <p> tag in the sense that it
forces text to a new line, but without inserting a blank line. It does
not require closing tag.
This empty line is
because of <p>
tag
Here we used
<br> tag and
there is line
break.
9. <HR> Horizontal Rule Line is other type of break in HTML which is
used to insert a horizontal rule i.e a straight line in a webpage.
This is <hr>,
Horizontal rule
We can also apply different attributes in <HR> tag to display a
horizontal rule in nice look. For ex:- <HR color=green size=9>
In this we have set green color and size as 9 for our horizontal rule.
This is <hr>, horizontal rule
with green color and size as 9.
10. There are many tags to format your text in HTML. You can add styles
like italic, bold, and underlined to text and can add different font
styles and colors to text.
There are many tags in image below used to format text. You can
also strikethrough text with <strike> tag. These tags are needed to
be closed.
11. To increase visual appeal of your page, you should add images on
your web page to make the page better.
To insert image in your webpage <img> tag is used. It is needed to
define different attributes to insert a image. It is empty tag and not
needed to be closed. For ex- <img src=“image.jpeg”>
img stands for image and src stands for source. Source tells from
where we have to add image. In above example we are asking HTML
to insert image name image.ext(ext means extension like png,jpeg).
You can also add border to an image by applying a border attribute
for example- <img src= “a.jpg” border= 6> -in this we have added
border sized 6.
12. We can control how the browser align the image when we have have
text and images on webpage. To align we use align attribute with
<img src> tag. For ex- <img src=“hello.jpg” align=“top”>this results
in-
It is nice image
There are 3 types of aligning with text:
TOP- aligns the top of the image with surrounding text.
MIDDLE-aligns the middle of image with surrounding text.
BOTTOM-aligns the Bottom of image.
13. We can control how the browser align the image when we have have
text and images on webpage. To align we use align attribute with
<img src> tag. For ex- <img src=“hello.jpg” align=“top”>this results
in-
It is nice image
There are 3 types of aligning with text:
TOP- aligns the top of the image with surrounding text.
MIDDLE-aligns the middle of image with surrounding text.
BOTTOM-aligns the Bottom of image.
14. Normally when you create an HTML page, everything flows linearly,
meaning one thing directly after another. All of my previous posts are
an example of this, i.e. text, then picture, then text, etc.
Sometimes you may want to include text next to an image instead of
below it. This is called wrapping text around the image. It‟s actually
fairly easy to wrap text using HTML. Note that you don‟t have to use
CSS in order to wrap text.
So here‟s how to wrap any text around a picture in HTML:
To align picture to left-
<img src=”IMAGE URL” align=”left” /><p>Your text goes here.</p>
To align Picture to right-
<img src=”IMAGE URL” align=”right” /><p>Your text goes here.</p>
You will see example of right and left wrapped image in next slide.
15. Left align picture
In order to have the text wrap along
the right side of the image, you have
to align the picture to the left.
Right align picture
In order to have the text wrap along
the left side of the image, you have to
align the picture to the right.
16. There are two kinds of lists in HTML:-
1. Ordered list
2. Unordered list
In ordered list, each item is preceded by a number and in unordered
each item is preceded by a bullet. for ex:-
17. To create ordered list in HTML <ol> and </ol> are used in the
beginning and the end of list respectively.
To create unordered list in html <ul> and </ul> are used in the
beginning and the end of list respectively.
The tag <li> is needed at the beginning of each list item in both the
lists.
18. The three most important tags for tables is the opening table tag,
<table> and the table row and table data tags - <tr> and <td>
respectively.
The <tr> tag represents a row for the table.
The <td> tag represents a cell (or column) inside the row.
Now, with that in mind, let's create a simple table:
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
</table>
19. You can also make our table nice by adding border to our table and
table data & rows.
To add border you can use border attribute with <table> tag. For
example <table border=“2”>
To add header in the table use <TH> tag. Fr example
<table border="2">
<tr><th>row 1</th><th>row 2</th>
<tr><td>one</td><td>one</td></tr>
<tr><td>two</td><td>two</td></tr>
</table>
Results in:-
20. Hyperlinks are underlined or highlighted words or images that can
be clicked to jump to a new document, webpage or another section
within a webpage or document.
<a> or <A> tag is used to create hyperlinks,where A stands for
anchor.<a> tag contains attribute i.e href (Hyper Reference) for
example. <a href=“http://www.google.com”>Google</a> , by
clicking Google it takes you to google.com
This is
hyperlink
We can also add image instead of text in hyperlink, we have to just
make a little edit that we have to add <img src> tag in between <a
href> &</a> tags. For example- <a
href=“http://www.google.com”> <img src=“a.jpg”></a>, In this
the image has to be clicked to go to hyperlink.
21. Anchors are used to navigate in a same document by clicking
hyperlinks. They enable user to navigate to another section of page.
Anchor is hyperlink destination inside a document
See this small example in Image Below:-
On clicking here
User is taken
to this point
22. Steps of creating linking to an anchor:-
Creating an anchor inside document i.e marking and naming the point inside the
document to which you want to link to. This is done with anchor tag A and attribute
name instead of “href”.
<a name=“what is html”>word to be reference in what is html</a>
Linking to the anchor inside the document. This is doneby using “#” sign followed by
the anchor name as link target.
<a href=“#what is html”> click here to goto what is html</a>
this will be the hyperlink to another section- what is html?
The symbol “#” in front of a link location specifies that link is pointing to an anchor on
a page. It is instruction to web browser to look through HTML document for anchor
named “what is html?”
23. Thank You
If any query, mail me to asteksite@gmail.com or join me in
facebook- facebook.com/shreyindian
Or
www.shreygoswami.in
