Web Designing with Dreamweaver - Anatomy of web designing using HTML and CSS

In this blog post you'll get to know the anatomy of a website and how most web pages are made using HTML and CSS. 

When you look at a web page, did you ever think about how it is made? In order to display a web page, your internet browser reads and interprets some special set of instructions. these instructions are primarily written in two languages called HTML and CSS. 

Basically the world wide web consortium or in short W3C are the ones who defines the web standards, or specifications, for these web languages. so it is very important to understand web standards to ensure that the different web browsers now you have these days, displays your pages accurately. Dreamweaver is a software that includes features that allow you to build web pages based on the latest web standards. Now lets look at how HTML and CSS works together to make a web page. 

What is HTML?

So first of all let's look at what is HTML, Generally web pages display content and have an underlying structure defined by HTML. the content can include text, images, links or even audio and video. basically Most HTML elements are written using opening <element> and closing </element> (like these) tags that tell the browser what type of content to display so in order to define the structure of the page, the tags should be written in  a specific order. 

The example in the above image shows three common HTML tags 

• <h1> is the tag that specifies heading text, and it is good for page titles. 
• <p> is the tag that specifies paragraph text, and it is good for body text.
• <img> tag displays an image specified by a source file. 

However you should keep in mind that not like the above image. when you write an HTML code, use lower case letters.

What is CSS?

Now let's move on to CSS. With HTML you're given the basic structure to your web site, but there is not much customization to the style or layout. Eventually you'll want to add colors, format text and images and reposition elements in your web page. So CSS is the language that works with HTML to apply this style and formatting to your web page. You can use CSS to find one or more HTML elements. and then provide additional instructions. for what to do with that element like changing its color or center it on the page. 

 

In the example in the above image shows how CSS is used to change the appearance of the three HTML elements.

• <h1> the heading text is center-aligned.
• <p> the paragraph text is red,bold,and center-aligned.
• <img> the image is resized to 160px by 100px.

Dreamweaver is a perfect tool to make your own website with HTML and CSS. So I'm going to post some Dreamweaver tutorials series that will walk you through the process of making a professional and cool website.