Creating A Web Page
There are three main parts that pertain to creating a web site:
- Knowledge of HTML (Hyper Text Markup Language);
- Knowledge of CSS (Cascading Style Sheets);
- Good planning of content and design.
Let's look closer at what Hyper Text Markup Language means.
HTML is not a programming language, it's a markup language. A group of people called the World Wide Web Consortium (W3C) sits there and is constantly working on defining and refining that language. So far, there have been 4 versions of HTML, and HTML 5 is coming out. This markup language, developed by W3C, tells your web browser what to do by a series of commands called "tags". These tags look something like this:
As you see, tags are recognized by the browser as such by the angle brackets around them. The opening tag looks like this: <tagname>; the closing tag looks like this: </tagname>.
All tags, with the exception of a select few, have an opening and a closing tag.
That is, if you forget the closing tag, the brwoser won't know what to do with what you just wrote, and your web site will look all broken. We don't want that. Which means - pay attention to your tags. Open and close them - always, and if you don't close it, you better know a reason why you did that.
Common HTML Tags
Below is a list of most frequently used HTML tags, althrough there are many more:
- <html> content </html> - lets the browser know that it will be reading HTML now;
- <head> content </head> - contains important information about the web page, i.e. what the name is, what the colors, fonts, and styles are, etc.
- <title> content </title> - one of the things you would put into the head. Gives a title to your web page taht shows up top above your browser's toolbar. This page is titled "Make A Web Site - Home". Can you see it?
- <body> content </body> - everything in between these two tags is what the user will actually see;
- <a> content </a> - the link tag is arguably what makes the Internet the Internet. It is only with the help of links that web pages are different from, say, Word documents;
- <ul> content </ul> - unordered list;
- <ol> content </ol> - ordered list;
- <img /> - lets you insert an image into your web page;
- <h1> content </h1> - "h" stands for "heading". The numbers range from 1 to 6, 1 being the most important and hence the largest heading, 6 being the least important and hence the smallest heading;
- <p> content </p> - the paragraph tag helps organize text into paragraphs. This tag will add a little space on the top and the bottom of the paragraph to visually separate it from preceding and succeeding text.
- <br /> - creates a line break; equivalent to hitting "Enter" in Microsoft Word and moving to the next line. Line break will let you move within the same paragraph without adding extra space;
Tags - What To Do With Them
Tags like html, head, title, body, paragraph, and heading are pretty self-explanatory: insert the text you'd like to see in between the opening and the closing tag, and you are all set!
What about those other ones? Let's see:
Link.
For the title tag to work, it needs to do something like this: <a href="http://www.w3.org/" title="W3 Consortium Home Page">Link to W3 Consortium</a>, it will display something like this: Link to W3 Consortium. As you see, the href part tells the browser which address we need to go to. If you hover your mouse pointer over the link, the title part will pop up and tell you that you'll be going to the W3 Consortium Home Page. What is in between the opening and the closing a tag is what is actually displayed to the user.Unordered List.
Unordered list items will have bullet points in front of them. Here is how:- <ul>Unordered List:
- <li>First List Item</li>
- <li>Second List Item</li>
- <li>Third List Item</li></ul>
Ordered List.
Ordered list items will have numbers points in front of them. Here is how:- < ol >Ordered List:
- < li >First List Item</li>
- < li >Second List Item</li>
- < li >Third List Item</li></ol>
Image.
Before you insert an image tag, you need to make sure you realize what image the computer should be looking for.- Option #1: you have an image on your computer
When you make a web site, you need to create a folder where all materials pertaining to the web site will be stored. From there, the browser will be looking for linked files. If your files are in different locations all over your computer, the browser won't know what to do and will display the tedious "404: Not Found" error. To avoid that, make sure you put everything you want published on your web site into your web site folder. Subsequently, for better organization, the web site folder should have a folder named "images", where you'd put, evidently, all the images you want your web site to display.
Let's say you have an image of a baby seal named "baby-seal.jpg" in your "images" folder. The image tag should then look like this:
<img src="images/baby-seal.jpg" alt="Image of a Baby Seal" /> - Option #2: you found an image on the web
First, let's note that this is not the best option. What if that person deletes the photo from their web site? Your image will appear broken. What if the server on which the image is located is down? The image will, again, appear broken. What if the server on which the image is stored is really slow today? Your image will load too long. To avoid all these and many more what-if's, it is always best to save all images that you will be displaying on your web site into your "images" folder. But let's see the code for this just in case:
<img src="http://babyseals.org/savetheseals/images/baby-seal.jpg" alt="Image of a Baby Seal" />
- Option #1: you have an image on your computer
Line break.
Line break doesn't have any additional attributes. It is important to note that line break tag, along with the image tag, are the only two tags in this beginner manual that do not need a closing tag. There is a back-slash inside the tag, and that is enough. The line break tag never changes.
Structural Value of HTML
What About Cute Colors and Fonts? - you ask. HTML exists as a structural entity. It defines the layout, content, and structure of the site. It does not make the web site pretty. Cute colors and fonts are what CSS (Cascading Style Sheets) mentioned above are for, and we will look at those in just a minute.
If we don't put in any colors and structures, we can see more clearly what the architecture of our web site looks like. If you will, the web site is like a doll or a person - one may put various individual attributes into it. Some parts should stay the same, and every one of your creations should have a head and a body. Other elements - say, facial features, length of legs or nose - can differ from person to person. Same with the web site - each web site should have a head and a body, but it's up to you what text, images, and links you put into it and how you arrange those.
On the other hand, CSS is like clothing. It may be bright and extravagant, or it may be pale and elegant; in any case, the clothes a person puts on don't change that person's features. Clothes may make someone look better, but they can't change what's inside. It's the same with a web site - one web site may have various CSS connected to it, yet the content will stay the same. We'll look at it closer on Page 4.
Before we do that, let's look at two ways you can emphasize importance of text. You can italicize text by putting an <em>emphasis</em> tag. If you want something to be bold, put a <strong>strong</strong> tag around the word(s) you find important.
Why Is Structural Value of HTML Relevant?
HTML makes you think what should be on your web site. HTML makes you define what the organization principle you want behind your site without the distraction of thinking about colors. It makes you think what's more or less important, and give headings numbers corresponding to their importance. HTML gives you space to understand what your web site is before you worry about how it looks.
HTML Rules and Conventions
All text in HTML is to be done in lower-case.
This is a convention supported by all web designers. Less work for you if you don't have to press the "Shift" key all the time. This convention stands when naming files as well. Your computer sees "Baby-seal.jpg" as different from "baby-seal.jpg". To avoid confusion, we have decided that file names will be all lower-case and will have no space bars. Computers have strange reactions to space bars. Some say it's because of their hidden wish of going into space.
This Theory Is Boring!
All right, let's proceed to Practice
