Restaurant Site Implementing HTML

Restaurant.html

I know it’s been a while since I wrote on my blog. Things have really been heating up. Over the last two weeks I have been pretty busy learning HTML, CSS, and some Java. What do these three things have in common? Well, for starters they have allowed me to create a local website. Yes, local being that it is strictly to my computer but is also published on my GitHub. In this post I’m going to walk you through the bare bones version of my restaurant. In the next post you’ll see the restaurant again with more CSS implementations. The post after that will include CSS and Java implementations. So essentially you will see the gradual evolution of my restaurant and the changes made within the code.

I am attaching the link to my restaurant. All images are reserved to me as they are taken by me. Meaning that they don’t belong to another party other than myself. I am the sole producer of them and I had fun taking them.

Please see: https://gem149.github.io/home.html

I’m going to very briefly gloss over Github. I created a Github account and created my repository. This repository will hold all my information.

The first step that we needed to do is establish our HTML. In order to do that we need to use a text editor. In my case I liked Atom so that is the editor that I will be using for all my coding exercises/projects. I like atom as it is easy to navigate and it also does auto complete. I don’t necessarily like that and yes it can be turned off. However, with learning a lot of new things I find it to be helpful in regards to completing my thought process.

After opening Atom, I created an HTML file called restaurant.html. This is going to be my home page for my restaurant. I created three more html pages for home, menu, and contact us. In each of these pages I am going to add different things that I want to be displayed. The key thing to remember is that in order for them to work you must link them. It is an easy mistake to make, I did it a few times as my restaurant progressed.

Now the fun begins, I’m going to start writing my code. Keep in mind that for the next three additional HTML pages you must start from scratch and add from their. First, I’m going to establish this document as an HTML. To do this I will type <!DOCTYPE html> . This establishes that this is an html file. Then we will type <html> and then <head>. In HTML we will use the syntax <head> and then add a title to. <head><title>title page</title> </head> But what exactly does this do? Well, it adds the title in this case title page to your tab. Still confused, no worries. For example, you open google chrome. When you open it a new tab page opens. In the tab bar it says new tab. That new tab you see within the tab that is your title. That is what you have called that tab in you head. In my case I named my title Home Page. After I establish this title you need to close it out. By doing this your telling the computer that you ended said command.

The next step is to add a body. This goes underneath are head. <head><title>Home Page</title> enter <body> To do this we are going to use <body> and when we are done writing in the body we will close it by writing </body>. In the body I’m going to add a header to my page so that when someone views the page it will say Gaston’s Tavern and Restaurant. To add a header I need to establish it. <header><h1 align=center><b><i><span style=”color: Red”>Gaston’s Tavern & Restaurant</span></b></i></h1> . Whoa, that’s a lot of code. Let me break it down for you. So first in my header space I am creating my header. In HTML their are six headers H1-H6. The higher the number the bigger the text of header is. Think of it in terms of importance. If on my list I have something that is number 1-6. I would want to complete the first thing on my list as it is the most important and the other things can wait. In HTML it’s the same concept, the closer to six the smaller the header becomes. The next command align=center will center my text. The <b> and the <i> are for bold and italics. So, span style is an inline text form of CSS. It allows us to add CSS features to our line of code. It will not apply to our other code unless we manually enter this code again or actually create a CSS page and implement the codes to select code under certain areas, but that is knowledge for later on. In this case it will turn my Gaston’s Tavern & Restaurant the color red. In this case for the color you can use hexadecimal code or colors that are already established in CSS. Next, we will close out the code and close the header. At the top of the page it should show Gaston’s Tavern and Restaurant in the center of the header, it should be bold, in italics, and red. If it is than we were successful.

Moving along, I’m going to create my navigation bars. These are links that allow me to access my other html files. To do this I use <nav> which stands for navigation. Than I used the command <hr /> which stands for horizontal rule. What this does is add a horizontal line break between your code. The next step is to create a

. A div can be used to execute a certain code for a section or be a container of information. Here is how my code looks keep in mind for this I’m not hitting enter but every line of code should have it’s own line.

This will make all the text within my div align to the center position. Now still within my div I’m going to add my other HTML pages. Please remember to make sure they are spelled correctly! Otherwise, they will not link properly or sometimes at all. In order to link my pages we will be using the Test as our example. allows us to link to our pages or other urls by pasting the link inside. Let’s refer to the example above to understand what is going on. We have the a is for our hyperlink and the href is for our url. In our case we are saying we want to link our test.html to whatever page were working on. That page should be known as Test as that is what we are calling it by writing it between the two > command.

Home Menu Contact Us Great! All my HTML files are now linked to my restaurant.html. Before I close my div I’m going to add an

and than close my

. Now a line should appear between the header, my links, and the rest of the body.

Now, I’m going to create a second div within my body. Before we go further, you can have multiple divs. Now I’m going to add an image.

Okay, so let me explain. I uploaded my picture from my camera to my repository. Once it appeared in Atom in the assigned repository I was able to access the image. So now, I want it to appear on my HMTL file. To do that I used the command img src which is short for image source and the name of my image and it’s extension. Please make sure your extensions are accurate! I added alt, which will only appear if my image isn’t correct, missing, extension wrong, etc. Then I added the width and height of my image. This will display the image based on the information above. There are many ways to use width and height but I won’t be covering it in this project. Next, I will close my

. You should now see the image in the exact spot as the width and height coordinates within the body.

Moving right along, I am going to create another div to hold restaurant’s description. I’m not going to spend to much time explaining this. I’m creating five paragraphs to describe my restaurant and assigning them a color.

Restaurant Details

Welcome to Gaston’s Tavern & Restaurant!

Here at our establishment we are excited to meet your every desire.

With that in mind we have created a very diverse menu to let you expand your palet.

We hope that you enjoy your meal and dine with us again!

. You should now see my restaurant’s description below my image.

Lastly, we will create a footer, which is exactly as it sounds. The footer will contain information at the bottom page. This will also wrap up the restaurant page. I will continue below with the other HTML files but I will only be introducing you to things we didn’t cover above. So for any information you may need to utilize again you can refer to above. Let’s create our <footer> inside we will add what we want displayed. <footer> <hr/> <p align=center><span style=”color: Red”>Main Street, Orlando, FL, 32830</span></p> <p align=center><span style=”color: Red”>000-000-0000</span></p> <p align=center><span style=”color: Red”> © All right’s reserved to GM</span></p> <p align=center><span style=”color: Red”> © All images were taken by GM while away</span></p> </footer> Now, we should see the text at the bottom of our screen! Perfect! Lastly we need to close our </body> </html> Congrats! We completed our restaurant.html!

Home.html

The next HTML file we will be working on is my Home.html. As I stated before, I will only be discussing the things that are new/added that were not included in the first page. Now why did I call this file Home.html? Well because this page is just there to refer you back to the home page. Silly, I know but it was what the project asked for so I delivered it. So on this page in the <head> I am changing the title. <title> Return to Home </title> </head>. The top of the tab will now read Return to Home.

I followed my earlier steps and added my header within my body. Now I’m going to add something that wasn’t there before. I’m going to create a link that when pressed will take you back to my Home Page. Before I do that, let me create a paragraph to let my user know how to return to the Home Page. <p align=center><b><span style=”color: Red”>Click the logo to go back to the Main Menu!</span></b></p> Hmm, what logo? Well, we are going to add an image which is my “logo” to go back to the main menu. The steps are very similar to the previous ones for adding an image but this has some variation. <a href=”restaurant.html”> <img src=”gtavern3.png” width=”400″ height”150″> </a> Please note this is in a div. Now that I closed my div, I should see my image. If I click on the image or “logo” it should take me back to the Home Page. Perfect! It worked. As I did before, I will add the footer and I should see information about the location of my restaurant and any other important information.

Menu.html

The next HTML file we will be working on is my Menu.html. On this page I will be changing the title within my head to say Menu. The next thing I will do which is different will be to add right underneath my body my link to go back to my Home Page. To do that I will use <a href=”restaurant.html”>Back To Main Menu</a>. This link should appear in the upper left hand corner of your screen before your header. I will add my header underneath it before creating my navigation bar the same way as we did before. The next thing I’m going to explain to you which I totally messed up on and didn’t get it spot on until my third attempt at this is a table. My table look cool to me but it is a mess. So, look at it and enjoy but note that this table is the first attempt I made hence the rawness. A table, sound simple it was not, well at least not to me. It took three plus attempts to nail it the way the project required. But I kinda like it the way it is, but it changes over time. Anyway, to create a table we use the <table> command. In my case I used <center><table width = 100%> This was to center my table and make the table width 100 percent. It didn’t exactly work but it will do. In this case I used <tr> and <td> which are table row and table data. In my case I created two tables and used these command to create content within them. I also inserted an image between the table using a div. I’m reluctant to show the code as it is all over the place. It appears that one table’s contents go left and right. The following table has an image and text goes left and right and the last item in the table goes center. I closed my tables each time I finish with them before closing out the rest of my code.

The last HTML file we will be working on is my ContactUs.html. Which by far I think was the hardest. The reason being that it had many moving parts. By that I mean I had to create a contact form that actually resemble a contact form. It was a lot of work on of which has kept developing and made feel good as I overcame a hurdle. On this page I’m changing the title within the header to say Contact Us. I’m creating the same links above to return the home page and my navigation menu. Now, comes the hardest part meeting the expectation of the project and getting the form to it’s expectations. But we can do this. Let’s start by creating a div for our form. The div is going to align the text within it. We have used this code before above.

Now let’s create our form. <form action=”submit.html” method=”POST”> What does this mean? Well, in my case this doesn’t do anything as their is no PHP and no submit.html. What it is supposed to do is send the information using the html to an email again you need additional things to do this such as PHP. Which, I have not been introduced to yet. The next step is to actually create the form. <label for=”Name”>Name:</label> <input type=”text” id=”firstName” name=”firstName”> <br /> <br> <label for=”Email”>Email:</label> <input type=”text” id=”email” name=”email”> <br /> <br> <label for=”Phone”>Phone:</label> <input type=”text” id=”phone” name=”phone”> <br /> <br> So here we are creating our different labels for what we want it do, specifying the type of text, and it’s personalized id. In each of these we are telling the form this is the name, the type of input will be text or numbers. Than to create space we are using the break command. This is good for spacing everything out.

Moving along now we will create our contact portion of the form. <label for=”contact”>Reason for Inquiry:</label> <select id=”contact” name=”contact”> <br /> <option value=”default” selected>Catering</option> <option value=”Private Party”>Private Party</option> <option value=”Feedback”>Feedback</option> <option value=”Other”>Other</option> </select> <br> Above we are creating are setting options in a drop down menu for the user to chose from. By default we are selecting Catering. To do that we set the option value to default.

The next thing is to create a label for additional info and setting it to text for anyone who wants to add additional comments. <label for=”info”>Additional Information:</label> <textarea id=”info” name=”info”></textarea> <br> <br>

Next, I’m going to create a label to ask my user’s if they have ever been to my restaurant. With this I am creating a radio button for yes or no. With a radio button you can only make on selection. In this case I set checked which is our default to no. <label>Have you been to the restaurant?</label><input type=”radio” name=”answer” value=”no” checked /> No <input type=”radio” name=”answer” value=”yes”/>Yes <br>

Now, I’m going to set up a choices for my users to tell me what day is best to contact them. In this case I did not set a default. By using a checkbox as my input type the user can select more than one option. Which differs from our radio options. As I said before with radio buttons it is either one or the other but checkbox can have multiple options. <br> <label>Best days to contact you:</label> <input type=”checkbox” name=”myChoices” value=”M” uncheck/>M <input type=”checkbox” name=”myChoices” value=”T” uncheck/>T <input type=”checkbox” name=”myChoices” value=”W” uncheck/>W <input type=”checkbox” name=”myChoices” value=”Th” uncheck/>Th <input type=”checkbox” name=”myChoices” value=”F” uncheck/>F <br>

The last step before closing everything out is to create a send Request. You can add a button later on that is interactive. In this case the Send Request will do nothing or give an error as it redirects. <br> <input type=”submit” name=”Send Request” value=”Send Request”> </div>

Now that I closed everything out we should be good to go. Everything is in sync and I can navigate my pages and see their contents from anywhere in my HTML. What a success!

For anyone attempting this for the first time, my advice is cut yourself a break. I had limited time to do this and was really stressed out. Take your time, and explore. Don’t let your obstacles hold you back and ask for help as you need it. I look forward to seeing where this journey leads us.

Share this:

Related