Creating a webpage in html

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.

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

 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

 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.

 <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.

 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.

 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.

 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.

 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.

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.

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:-

 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.

 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>

 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:-

 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.

 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

 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?”

Thank You If any query, mail me to asteksite@gmail.com or join me in facebook- facebook.com/shreyindian Or www.shreygoswami.in

Creating a webpage in html

More Related Content

What's hot

Similar to Creating a webpage in html

Recently uploaded

Creating a webpage in html