Understand the anatomy of a website
Learn how most web pages are made using HTML and CSS.
When you look at a web page, you might wonder how it is made. To display a web page, your Internet browser reads and interprets a special set of instructions. These instructions are written primarily in two languages: HTML and CSS.
The World Wide Web Consortium (W3C) defines the web standards, or specifications, for these languages. It is important to understand web standards to ensure that the different web browsers display your pages accurately. Dreamweaver includes features that allow you to build web pages based on the latest web standards. Let’s look at how HTML and CSS work together to make a web page.

What is HTML?
Web pages display content and have an underlying structure defined by HTML. The content can include text, images, links, or even audio and video. Most HTML elements are written using opening  and closing tags that tell the browser what type of content to display. The tags are written in a specific order to define the structure of the page. The example below shows three common HTML tags.
⦁

 specifies heading text, good for page titles
⦁  specifies paragraph text, good for body text
⦁  displays an image specified by a src (source file)
Note: The HTML in this example displays in upper case to illustrate the concepts more clearly. However, it is best practice to write HTML tags in lower case when coding your own pages.  What is CSS?
With HTML you’ve given a basic structure to your web page, but there’s not much customization to the style or layout. Eventually you want to add colors, format text and images, and reposition elements on your page. CSS is a language that works with HTML to apply this style and formatting to your web page. Use CSS to find one or more HTML elements, and then provide additional instructions for what to do with that element (such as change its color or center it on the page).
The example below 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 150px by 100px. February 11, 2015
Contributor: Jonathan Petersen