HTML5 Header & Horizontal Navigation Menu (PART 1) | XO PIXEL


In this two part tutorial, I’ll be showing you how to make this basic header and horizontal navigation bar using HTML5 and CSS. The first thing were going to do is download a code editor. For this tutorial, we’ll be using brackets. to download visit Google and search for
brackets brackets is a great free code editor
developed by Adobe Its great for beginners because of its live preview function and many other features So now that you’ve installed brackets, you’ll notice how minimalistic the interface is. This is why it’s great to use, especially when your just starting out. Just to briefly acquaint you with the text editor, the left hand side panel is where you’ll store all your folders and files for the website. the right hand side panel has two icons the first icon is what enables the live preview function. The icon below is an extension manager. extensions help improve the
functionality of the application it’s a great way to increase
productivity and to simply make your job a little easier for this tutorial we’ll be keeping it simple so you won’t be installing any extensions. Lastly, the middle section is where we’ll be writing all of our code. Now that your more familiar with the interface, we can start coding! First, let’s create the folder so we can store all of our files. Right click on the left hand side panel to create a new folder and name it my portfolio. right click on the folder and create you index.html file. Right click on the folder again to make the main.css file now that we have our files ready we can begin writing the html for the header and navigation On line 1, always start off you html documents with the doctype declaration. Hit enter to go to line 2. On line 2, we’ll write atag We’ll make line 3 a gap. On line 4, we’ll make thetag. This is not the header area. Line 5 sets the character encoding and line 6 allows you to state what version web browser your website should be rendered in. your website should be rendered in. Thetag can be seen on the tabs in your browser or the text that appears when you favouriting a web page. Lastly, line 8 is the tag that links the main.css file to the index.html file. Alright, thats all for thetag. Now for thetag! Simply write the body tag below the head tag. What you write within the body tag will be seen in your web browser. like a chocolate bar our header and navigation area will be contained within a wrapper. So let’s go ahead and create a div tag with an id and call it ‘wrapper’. Next, we’ll create our header area using the header tag. Within the header tag let’s put our main header title. Create an

tag and add your own title or make it “my portfolio”. Let’s create an

tag to make the subtitle. Lastly, let’s create the navigation section by using the nav tag. Notice how Brackets is automatically closing the tags? Within the nav tag we’ll use the unordered list tag with a class attribute; let’s name the class ‘main_menu’. To make the actual navigation links, we’ll add a list tag

  • Within the list tag we’ll use the ‘a href=”” ‘ attribute to make the navigation clickable Write ‘index.html’ within the quotation marks. After the closing tag, name the link. Make sure your writing in lowercase, will be changing the cases the link
    using CSS. Now repeat the previous steps to make the other navigation links. Within the quotes, you may also put the pound/hashtag key (#) so that when the link is clicked in the browser, it won’t lead to anything. It’s a link place holder. Now, that’s it! We’re done our navigation section and we’re also done all of our html! Ok, now for the fun part. Click the live preview icon to see what all of the code looks like within your browser! Now, to make this look all pretty, we’ll be writing our css in part 2 Don’t forget to rate, comment & subscribe! See you in part two!
  • 34 Comments

    Add a Comment

    Your email address will not be published. Required fields are marked *