General: all websites should follow this structure
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Compare it to the way you might identify a person, see the graphic example: click here
Structual Definition
<html> When you start building a website with HTML, in the beginning of the file, you have to begin the document with a bracket and html tag, like this: <html> That means you start the webpage, then to end the HTML file, you have to do the same thing, only this time you "close" the document by including a / like this: </html> and you're finished. Make sure, when you start a command you use, < > and to close you use, </ >
<head>
<title> Soyeon Jung </title> -- title must be inside Head tag.
In a web browser, you page would look like this...↓
The title that shows up in the browser window is also the default bookmark/favorite name for visitors who may bookmark your page.
</head>
<body bgcolor="#ffffff"> ---When you choose the bgcolor, don't forget " " and # before and after putting color hex number.
Use the photoshop color palette (red circle) to find a color hex number easily. It covers every color tag.
Another tip) there are a lot of advanced tips in the body command. we will learn them later.
Section Headings: These are useful to edit paragraphs, but it's up to how you want to organize the website.
<h1> HTML is stupid</h1>
<h2> HTML is stupid </h2>
<h3> HTML is stupid </h3>
--- It has an align command - left, center, right. But, remember the default align is left for this tag. Here the examples are.
<h3 align="left"> HTML is stupid </h3>
<h3 align="center"> HTML is stupid </h3>
<h3 align="right"> HTML is stupid </h3>
Formatting Text Appearance
The text command is <font></font> and it needs you to input specific information, "size, face, color and width." But I want you to forget about width because it doesn't look good on the website.
<font size="1"> Fonts are fun sometimes.</font>
--- font size="1" is the smallest, size="3" is default, and size="7" is largest. Another opition is size="- number" and size="+ number".
<font size="2" face="verdana"> Fonts are fun sometimes.</font>
<font size="2" face="times"> Fonts are fun sometimes.</font>
---Can you see the difference? And I'm making this tutorial with font face "Arial".
<font size="2" face="arial" color="#D96F08"> Fonts are fun sometimes.</font>
<font size="2" face="arial" color="#25D908"> Fonts are fun sometimes.</font>
---Basic color tips: color="#000000" is black, and color="#ffffff" is white.
Bold: <b> Fonts are fun sometimes </b>
Italic: <i> Fonts are fun sometimes </i>
Underline: <u> Fonts are fun sometimes </u>
Subscript: 4 <sub>th</sub> of July is fun sometimes
Superscript: 4 <sup>th</sup> of July is fun sometimes
<hr> Horizontal line.
---It doesn't need a close command, but you can create size, width, color, align and noshade(flat).
<hr> ---without any commands
<hr size="4"> ---with size command, you may try different sizes
<hr size="4" width="300"> ---with size and width command, you may try different sizes and widths. Default alignment is center.
<hr size="4" width="300" align="left">
---with size, width, align, you may try different sizes, widths, alignments. Align command is left, center, right.
<hr size="4" width="300" align="left" color="#234880">
---with size, width, align, color, you may try different sizes, widths, alignments and colors.
<br> line break.
A line break is an empty space created on the page, the same thing as the gap between two paragraphs of text in a word processor document.
If you want to have more empty line breaks, you can use this tag as much as you want.   is horizontal non-breaking space. For each   you write, another blank space will be added to your page.
Tables
A table is a good way to organize information on your page. It divides the page into different cells, which can be set to different sizes and filled with your website content.
<table> ---Tables are very important to develop and organize websites. It contains <tr><td></td></tr>
<tr><td> <tr> is table row alignment. <td> is table cell alignment.
write text or put images here.
</td></tr>
</table>
---Tables have a lot of commands as the other tags have. I only want you to know about width and border for now,
then we will learn more later
It seems a little confusing, but just think of it as opening the doors and closing the doors in a house.
Pretend <table> is a house and you want to put something inside the house.
What is the first step? You have to open the front door first. So, <tr> can be the front door.
Then you can go inside any room of the house, <td> can be the door to one of the rooms in the house.
Then, put something there. And when you leave the house, you should close the room door </td> first,
and then, close the front door </tr>, Then you can finally leave the house, </table>
Basic Examples
<table width="80" border="1">
<tr><td>
Something
</td></tr>
</table>
|
|
<table width="80" border="1">
<tr><td>
Something
</td><td>
Nothing
</td></tr>
</table>
|
|
<table width="80" border="1">
<tr><td>
Something
</td></tr>
<tr><td>
Nothing
</td></tr>
</table>
|
Pretend this one as a building which has 2 floors. |
Applied Examples
<table width="300" border="1">
<tr><td colspan="2">
Big Room in 2rd Floor
</td></tr>
<tr><td>
Small Room 1 in 1st Floor
</td><td>
Small Room 2 in 1st Floor
</td></tr>
</table>
|
|
Big Room in 2rd Floor
|
|
Small Room 1 in 1st Floor
|
Small Room 2 in 1st Floor
|
|
<table width="300" border="1">
<tr><td rowspan="2">
Big Room in 2rd Floor
</td><td>
Small Room 1 in 1st Floor
</td></tr>
<tr><td>
Small Room 2 in 1st Floor
</td></tr>
</table>
|
|
Combined 1st Floor and 2rd Floor
|
Small Room in 2rd Floor
|
|
Rented Small Room in 1st Floor
|
|
When you truely understand the tables, then you can eventually forget about the house explanation. It might make you confused when we do more advanced work with tables.
</body> ---Don't forget to close the body tag after everything in the body is done.
</html> --- Don't forget to close the html tag after your document is completely finished.
|