HOW TO CREATE WEB LAYOUT WITH DIV TAG STYLES WITH NAVIGATION BAR

Hello and Aloha to you! Welcome to my blog and I am Angela. I will give you basic informations about HTML and CSS. After that, we will proceed to the step-by-step tutorial

What is HTML?

HTML (Hypertext Markup Language) is a text-based approach to describing how content contained within an HTML file is structured. This markup tells a web browser how to display the text, images and other forms of multimedia on a webpage.

What is CSS?

CSS stands for "Cascading Style Sheet." Cascading style sheets are used to format the layout of Web pages. They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page's HTML. CSS helps Web developers create a uniform look across several pages of a Web site. Instead of defining the style of each table and each block of text within a page's HTML, commonly used styles need to be defined only once in a CSS document. Once the style is defined in cascading style sheet, it can be used by any page that references the CSS file. Plus, CSS makes it easy to change styles across several pages at once.

SO HERE'S THE STEP BY STEP TUTORIAL ON HOW TO CREATE WEB LAYOUT WITH DIV TAG STYLES WITH NAVIGATION BAR

1. First, open the NOTEPAD.

2. Add the following style attributes such as the height, width, border, and background-image of the masthead or type the following:

3. For the top navigation, add the following:

4. For the navigation bar located at the top navigation, type the following:

5. You can put the link or location of the website between the double quote ("") located beside the attribute href.

6. Continue to type the following for the content body.

7. NOTE that you can change the output and the content of the body.

8. For the bottom navigation, add the following:

9. NOTE that the links said above are optional for you.

10. For the copyright section, add the following:

11. Save the file and test it in the browser

IT WILL HAVE AN OUTCOME LIKE THIS: