Vewing other webpage’s HTML Code

Leave a comment

Now lets start the fun part and some old school tricks. As you are familiar with the basic html codes this will be just a piece of cake and you will be amazed to see how easy it can be. You can get lots of ideas and hints for your own pages, by just viewing other website’s codes. Here is how to do it.

  1. Click on VIEW then Page Source(Firefox), View Source (Safari) and Source (Internet Explorer). This will display the long list of codes. Similar to what we did earlier but longer with some new things which we will cove in later posts.
  2. Secondly, right click on the page you want to view then select VIEW SOURCE.

Don’t be too overwhelmed there is still long way to go. Just familiarize and revise the codes you know.

Before moving further lets outline some of the things we learned till now.

<!DOCTYPE> Version of (x)HTML

<html>  Opens html document     </ html> Closes html document

<head> Opens heading of the page   </head> Closes heading of the page

<body> Opens page  content     </body> Closes page content

<span class=”hiddenGrammarError” pre=””>Opens title of</span> the page   Closes title of the page

<p> </p> Paragraph

<br/> Line break

<h1> …………………. <h6> Heading, Lesser the number bigger the heading.

This should give you plenty of chances and ideas to play around with the codes we learned until we move to next step.

Ps. Leave a comment.

html code

Leave a comment

You must have noticed the code on the previous post and wondered where did they come from or why are they there. Now lets go little deeper into the world of HTML (Hyper Text Markup Language). Those codes are nothing to be scared of. It is some basic code that exist in all the webpages.

xml version="1.0" encoding="UTF - 8"?>

<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

xmlns="http://www.w3.org/1999/xhtml" cml:lang="en">

This indicates that we are creating xml document. The second and the third line indicate that our codes meets all the requirements of XHTML. These aren’t very important code , they are used to ensure the pages migrate efficiently and accurately validate the web page. With this part of code, Just copy and paste not recommended but sometimes it’s ok.

Now lets focus on HTML tags. They consist of two parts:

  1. Opening Tags: This is where the text starts. This tag always begins with < and ends with >.
  2. Closing Tags: This is where the text ends. Closing tags starts with /forward slash after <. Example </html>

There is also special tag called empty tag. It consists of a single tag that starts with < and ends with />. Example: . To get more knowledge of this lets open our first assignment and look at the codes  and try and find these codes there.

xml version="1.0" encoding="UTF - 8"?>

<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

xmlns="http://www.w3.org/1999/xhtml" cml:lang="en">

<head>

  <title> The Dummy Web Page </title>

</head>

<body>

<p>

(The text you typed earlier)

</p>

</body>

</html>

Body and title are used in every HTML pages. Lets consider writing an essay. Only in HTML you are writing your essay content between codes but the concept is same. Title, Paragraphs, body etc.

Body tags tells the web browser, the beginning of the body for the page. Example: The something that we typed earlier for our exercise.

Title as normal is the title or heading of the page.

HTML also consist of head tag, it appears near HTML. This tag describes the page but is invisible to the end user.

Lets be familiar with some tags.

<p>    Beginning of paragraph.

</p>   Ending of paragraph.

Begining of line break with in paragraph.

</br>   End of line break with in paragraph.

Don’t be overwhelmed with all this codes just be familiar with them. Now time to give heading to our essay.

In HTML it means H1, H2, H3. These tag gives heading or font size to the web pages . Smaller the number bigger the font size of the heading.
<H1>    Larger heading

Slightly smaller than H1

Smaller than H2 and so on.

<h1 id="title">https://chandani84.wordpress.com">My Marketing Blog</a></h1>

<h2>Building a&nbsp;Website.></h2>

As you can see on my blog “My Marketing Blog” is slightly bigger than the second heading “Building a website”.

Building a Website.

Leave a comment

As some of us out there, I am not very tech savvy person. My first close up experience with online marketing came in 2008 during my internship. Fascinated by it I tried learning as much as I could about it. After getting my masters in International Marketing and Management, I entered the real world of marketing to find a job, thinking I was well equipped. The reality was different from classroom and marketing had whole new dimension and face in this world. Marketing now meant leveraging website, online forums, blogs, social networks etc.

So with the experience I have from current job and the book (Sams Teach Yourself HTML and CSS), I am learning to design a website for a charity organization(Cancer Council Nepal)  in Nepal. I will like you to build this website with me. If you are like me lets learn something together or if you are pro then your suggestions and input will be valuable to us.

I started from second chapter as it says create a web page right now. So, lets open our notepad for window or TextEdit for mac. Do not use the word or wordpad.

Now write something about you, your family, your company or anything you want. This is just practice so lets roam free.  According to book save it in plain, standard ASCII text or plain text as we will be adding html tags to it later.

And finally when we are ready to save it save it as .html.  If you forget to save it as .html the notepad or TextEdit whichever program you choose to use will assign different format due to which you might not be able to find it and open it with web browser.
Note: In Mac TextEdit before saving click format then make plain text.

Now the icon will appear on the screen with the name you have given.html.
Double click and here is your first webpage.

Every web page must have the tags below:

<html>           HTML document

<head>           Page Information

<title>            Title of the website

<body>          Page Content

Here is how it should look like.

xml version="1.0" encoding="UTF - 8"?>

<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

xmlns="http://www.w3.org/1999/xhtml" cml:lang="en">

<head>

  <title> The Dummy Web Page </title>

</head>

<body>

<p>

(The text your typed earlier)

</p>

</body>

</html>

You can simply copy paste the above code and add your text or type the whole codes then save it. I will explain what the codes are and why we use it in the next post. Now we have our first webpage. Don’t forget to share your comments and views.