C4. INtro to HTML and Building Your First website. What You'll Need for This Lesson: A text editor like Notepad or Word. A web browser to upload your file. (Whether you have a computer or not)Something to write notes with. Syntax and Rules to Remember:
INtro to HTML and Building Your First website
Learning to make your first pre-90s looking website
It's not much....but it works...
So, almost every single html file ever starts with two lines of code:
Pretty easy, huh? The first piece specifies that you are about to write a html file. <html> is going to contain everything your site will show. The very last line will, as we learned about closing tags, look like </html>. Try it now and start your file with three lines of code. Remember to capitalize "document"(probably the only instance you ever do that), and to give each one its own line or it will get messy fast.
It should look like:
Now, if you uploaded that, you would just get a blank screen...pretty boring. Let's put a few things in here that will make it more lively.
<head> is a tag that will display something in the tab name. This is quickly followed by <title> which is the name of the tab.
So, <head><title>C4</title></head> would display "C4" in the tab. Notice here that title was nested inside head, so title closed first. If you had six tags nested in each other(it happens), the sixth tag would close first and the first tag would close sixth. Yes, it makes little sense at first, but it will clarify soon enough.
<head> displays that tab information, but what about the actual site? Well, we use the <body> tag. Everything within that body tag is what shows up on the page. The most common tag within body is <p>. <p> is where you write standard text.
<head><title>C4 or whatever</title></head>
*remember to save this with a .html extension.
<head><title>C4 or Whatever</title></head>
<h1>Here's some really big text!!!</h1>
<h6>...I'm really small</h6>
<div style="width:50px; height:50px;border:1px solid black">
<p><strike>The amazing</strike> C4 <strong>will</strong> teach <em>you</em> how to<br> Code!
<li>Caleb</li> 1. Caleb
<li>Michael</li> 2. Michael
<li>Carr</li> 3. Carr
I apologize in advance for the number of times you are about to hear the word "table". Tables are a useful way to organize things. Back when the internet was only for college professors and scientists, it was really helpful. Tables have a large nesting complex that is about to be demystified...get ready.
<table> Sets the entire table frame. Kind of like how body contains everything on the site.
<tr> makes you a horizontal row for that fine table you're creating.
<th> Table header that is in bold to announce what you're about read. </th>
<td> just the data for the table and each <td> or <th> creates another box </td>
To practice, on a seperate notepad/word, create an organized list AND an unorganized list. IT can be about anything.
*remember the <ol>,<ul>,<li> tags.
To practice, on the same notepad, create a table with two rows: each with a table header and two data rows.
Now let's get crazy and make a table that contains a list of your preference within it. just one data row.
When you're all done, copy and paste all of this(or Ctrl+V for those hotkey savvy) to the body section of your html file.
We're about to:
So far, we've made a basic black and white site. It's pretty ugly, but you've actually made your website run. How about adding color or positioning items anywhere on the page? before we take a look at the advanced items, let's look at some editing options.
When you place an attribute or element, it goes inside the tag. the attribute is followed immediately a colon and then the value. such as <font color="red">. Some values are in quotation marks, but we'll explicitly look at those.
As a review, let's take one of your existing <p> tags and change it blue, change the font to verdana, make its size your choice, and give it an id of your choice. In the body's opening tag, use a background-color of your choice.
Advanced HTML functions
*To post a link, the tag looks like <a href="">link description</a>/ in between the quotation marks, you place the URL of a site. If you leave the space in between the tags empty, the URL will show, if you write there, those words will act as a link.
* Posting images is similar, using <img src=""/>. This is one of the few tags can self-close themselves requiring no closing tag. You place the URL of the image in between the quotation marks.
*One cool thing you can do is if you place the <img> tag in between an <a> tag, the photo acts as a link.
First Name(or whatever): <input type="text" name="firstname">
Note that input is self-closing. you specified what type of input it is.
You can give inputs an ID(that's actually very common). Another very useful tool that we won't get into too much is source="" which sends the value of input somewhere. Very common in databases and a form of hacking called phishing.
In a later meeting, we will talk about CSS, which is another file type to make a website look good, but for this we will use an internal style sheet. Using an attribute called style="", we can make a pretty good website. Style is used within a tag, such as <p style="">. withing the quotations, you want to state what is being is chaged, colon/equal, how it is being changed and a semicolon to end it. In heavier programming, you'll see semicolons used to end almost every line of code.
A successful Internal Style Sheet looks like: <p style="color:red;">. You'll want to use this especially when using the <div> tag.
Sometimes the left-align look just won't do it for you. Lucky for you, there are two easy ways to move html objects. Contain your excitement. both are attributes attached to tags or used in internal style sheets.
* text-align: ...is used to move items to general locations like center, bottom, right, etc...
*margin: ...much more powerful! Better to use in an ISS. You can place an item to the exact pixel. margin: by itself can have two or four values. With Four, you start at the top postion, and move clockwise while you place the position. With two, is assumes the top and bottom are the same and left and right are the same. The first is top and bottom, The second value is left and right. An example looks like margin: 500px 700px 600px 300px; Note that values that involve pixels use the unit px.
*Lastly, you can use margin-left, etc. to place one margin specifically.
This is just basic stuff. The site looks jumbled from showing everything, but with an effort, you can make a great looking site with just that. This was THE intro to programming which we'll continure along with other computer parts.