Wednesday, May 6, 2015

HTML Basics-Lab (First Web Page)



Now as I mentioned that at the end of each chapter we would do a little bit of work on our project website. So for this chapter we would setup the home page for the document and get the website started. We are going to need, to create another HTML file and it needs to include all these basic tags that we saw before.

Now I have made things a little bit easier for you, if you go over to the working files you will notice that in chapter one I have a basic template HTML page and I’m going to drag this over my notepad icon to open it up and you will notice that we have all of the basic tags that each web page needs to have, already typed in. So, it will save a little bit of time. All we need to do is just start typing in, our body content and the title for the page. Now the first thing I really want to do is I don't want to save over my basic template because I probably want to use it again. So I’m going to choose file save as and we are going to save this in our website folder. So I’ll go back into the working files and down here at the bottom I’ll just chose the website project folder which is currently empty. Now we are going to name our file and for the name I’m going to choose index, it's the most commonly chosen name for the home page; now I do want to have the HTML extension at the end of the file name so let's add that and we’ll save our file just like before. Now we can add our content. Now as we are making a site about India so I’m going to just make the title of this page India! And for content I have got a text file included in our chapter one folder that we can use. Here we can see a text file named Home, I just open that up and we got some title and paragraphs that we are going to use for the content on our page so I’m going to select all those texts and copy them and we can go over and put our cursor in between the starting and closing body tags and paste the copied text. Now as we saw before, the white space in our file is going to be ignored in the HTML document when it's viewed in the browser. So, we do want to add formatting to it. I’ll go over to each one of the lines that we want broken up and I’ll just use the paragraph tag that we learned earlier, we are going to add a paragraph tag at the beginning and of course the closed paragraph to signal that the paragraph is done. I'm going to add that one to each one of my elements, now you can notice that I’m formatting the first two small titles inline and this is entirely the preference up to you where you want to put your tags. For larger paragraphs that take more than one line I’m going to put the starting tag at the beginning and start the paragraph from next line and will put the end tag, a line after the end of the paragraph. That way you can visualize the start and the end of the paragraph, especially when it expands multiple lines. So let's do that for our last paragraph here, as well. I'll just paste in here my start paragraph tag and add a line for the close paragraph tag.

<!doctype html>
     <html>
          <head> <title>India !</title> </head> 
          <body>
               <p>India</p> 
               <p>A Land of Infinite Variety</p> 
               <p>
               Indian School Children India, officially the Republic of India (Bhārat Gaṇarājya), is a country in South Asia. It is the seventh-largest country by area, the second-most populous country with over 1.2 billion people, and the most populous democracy in the world. Bounded by the Indian Ocean on the south, the Arabian Sea on the south-west, and the Bay of Bengal on the south-east, it shares land borders with Pakistan to the west; China, Nepal, and Bhutan to the north-east; and Burma (Myanmar) and Bangladesh to the east. In the Indian Ocean, India is in the vicinity of Sri Lanka and the Maldives; in addition, India's Andaman and Nicobar Islands share a maritime border with Thailand and Indonesia.
               </p>


                          <p>

                Home to the ancient Indus Valley Civilisation and a region of historic trade routes and vast empires, the Indian subcontinent was identified with its commercial and cultural wealth for much of its long history. Four religions—Hinduism, Buddhism, Jainism, and Sikhism—originated here, whereas Zoroastrianism and the abrahamic religions of Judaism, Christianity, and Islam arrived in the 1st millennium CE and also helped shape the region's diverse culture. Gradually annexed by and brought under the administration of the British East India Company from the early 18th century and administered directly by the United Kingdom after the Indian Rebellion of 1857, India became an independent nation in 1947 after a struggle for independence that was marked by non-violent resistance led by Mahatma Gandhi.
              </p>

              <p> 

              The Indian economy is the world's tenth-largest by nominal GDP and third-largest by purchasing power parity (PPP).Following market-based economic reforms in 1991, India became one of the fastest-growing major economies; it is considered a newly industrialised country. However, it continues to face the challenges of poverty, corruption, malnutrition, inadequate public healthcare, and terrorism. A nuclear weapons state and a regional power, it has the third-largest standing army in the world and ranks ninth in military expenditure among nations. India is a federal constitutional republic governed under a parliamentary system consisting of 29 states and 7 union territories. India is a pluralistic, multilingual, and a multi-ethnic society. It is also home to a diversity of wildlife in a variety of protected habitats.

             </p> 
       </body>
 </html>


We'll simply save our changes and take a look at the page. I’ll go to website project folder and open index.html file in the browser.



We’ll be adding a lot to this page and other pages to our website project. Now in the next post we’ll learn a lot more about formatting text with the HTML.


0 comments:

Post a Comment