With this tutorial I want you be apart of that percentage. In order to under stand how to build a website you have to understand the language. Don’t worry we won’t be working on sentence structure, and spelling and you won’t have to write and essay, this isn’t English class. However you will have to learn the grammar of a language called HTML. (Hyper Text Mark Up Language) Luckily this is probably the easiest language you will learn.
Now the reason I call it a language is because, this is what you will use to communicate with your internet browsers. For review, an internet browser refers to the program used to search and display website. For example: Internet Explorer, Mozilla Firefox, Safari. These are the most popular ones. Alright. Now that we got that out of the way, let’s start talking about this language.
Depending on how old you are you may call it grammar school or English class. Remember all the punctuation you had to think about when writing a paragraph or a sentence. Well there is a little bit of “punctuation” in HTML. But pay close attention because it’s not periods and comma’s.
Alright enough chit chat let’s get into it.
HTML is made up of something called TAGS. Tags are the words you use to construct your sentence, which creates your paragraph to communicate to the browser. Now I’m using English
Writing terms so that you can understand. Imagine your writing a letter with instructions to your
Friend, but in this case your friends name is Internet Explorer or Firefox. And this friend only speaks TAGS. Get it? Good! Let’s move on.
Alright so what I’m going to do now is tech you how to setup and HTML page before you actually start adding tags. This would be the equivalent putting a title, date and header on your English essay before you actually write it. So your essay was about eggs you could call it Eggs Galore.
So without reading you essay people would have an idea of what it was about. Same thing with
Creating an HTML page except you can only give it one title HTML. Easy right? Let me show you.
- Open up a simple text editor on your computer. (I.e. Word Pad, Note Pad, on a PC)
- In the blank Document I want you to types this <HTML>notice I put the letters in between the “<” symbol and “>” all tags have to go between these to symbols in order for it to work. For example when you’re writing a sentence. It must begin with a Capital and end with a period for it to be proper sentence, yeah I know it needs other stuff to but that’s the best example I could come up with for to understand.
- The next thing I want you to type is
make sure it’s in between the first tags that we did. What we’ve done is not only declare out HTML page we’ve also put the tags in place to give it a title - Now in order to title your page type anything you want
Alright now that we have created our page let’s test it out. Now next step I’m going to show is probably the most important. But it’s actually the easiest. In the text editor your using I want you to go to FILE > SAVE AS > when the dialogue box comes up select a location for your file, I would put it on the desktop for now. Then in the “File name:” box make sure you change the file extension to .html. So your file name should read like this: YOURFILENAME.html
Once that’s complete you should have an html file on your desktop. Now if you go to your browser and open that file you should see a blank page with the title that you chose. Now that you have the setup you can experiment with the tags I have below to create your page. But there is one more tag you need before you go crazy. This tag is called the BODY tag. Like essay you need an open and closing paragraph and you’re body paragraph which is the main content of your essay. Same thing applies to the HTML page. If you’ve done it correctly your page in the text editor should now look like this
ALL OTHER TAGS GO IN THIS AREA BETWEEN THE BODAY TAGS
Part 1 – You can experiment with the tags below to add text and images to your web page.
Images
Make sure the image your using is saved in the same place the actual html page is located. For example if your home.html page is saved on the desktop be sure to save your image on the desktop as well.
No if you don’t want to do that you can put the path of the image instead. For example if you have the image in a folder put the full extension. i.e. Desktop/images/dog.jpg
Heading Elements
Largest Heading
. . .
. . .
. . .
. . .
Smallest Heading
Text Elements
This is a paragraph
(line break)
(horizontal rule)
This text is preformatted
Logical Styles
This text is emphasized
This text is strong
This is some computer code
Physical Styles
This text is bold
This text is italic
HTML Unordered Lists:
- Coffee
- Milk
HTML Ordered Lists:
Text Fields
Radio Buttons
HTML Hyperlinks (Links)
Part 2 – Different Web Languages
JavaScript: allows wed designers to spice up their web page with dynamic content or interactive content.
PHP: produces dynamic web pages
SQL: is a database computer language designed for managing data in relational database management systems
CSS: Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language
Part 3 – Templates / Open Source / Resources
http://www.freecsstemplates.org/
