INtro to HTML and Building Your First website

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: • All elements and data are written within tags in HTML. such as <p> or <body>. • The element inside the tags specify the act to be done. <p>lets you write paragraphs in it. • Data is surrounded in tags, and the closing tag is identical except for a slash. For example:<p>text</p> • Always write tag elements lowercase. • All HMTL files are saved with a .html extension, and to open one, you fire up a web browser and open the file there. • Tags will nest themselves in a first in-last out method.

Basics: 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: <!DOCUMENT html> <html> 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: <!DOCUMENT html> <html> </html>

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.

The coding so far and the site. <!DOCUMENT html> <html> <head><title>C4 or whatever</title></head> <body> <p>Random text</p> </body> </html> *remember to save this with a .html extension.

More basic things to spice up your site • <h1> -<h6>...Headings. h1 is the biggest and h6 is the smallest. • <div>...encapsulates something like text in a square container. You can manually change the size, but we'll get to that later. • <strike>...place in front of a word, and it will put a line through something. • <strong>...place in front of a word, and it will bold it. • <em>...place in front of a word, and it will italicize it. • <br>...requires no closing tag. When you place this, it makes a new line after the word you placed it next to.

The code and the site <!DOCUMENT html> <html> <head><title>C4 or Whatever</title></head> <body> <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>random text</p> </div> <p><strike>The amazing</strike> C4 <strong>will</strong> teach <em>you</em> how to<br> Code! </body> </html>

LIsts! • There are two kinds of lists you can make: ordered and unordered. An ordered list presents the list with numbers. An unordered one shows it with bullet points. The three tags that concern lists are:<ol>, <ul>, and <li>.<li> is the list item or the data. it is nested within an <ol> or <ul> • <ol> is an ordered list. • <ul> is an unordered list. • An example: Looks like: <ol> <li>Caleb</li> 1. Caleb <li>Michael</li> 2. Michael <li>Carr</li> 3. Carr </ol>

Tables 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> </tr> </table>

Lists and tables 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.

Let's try to make sense of this so far We've covered: • The barebones of a website. • Lists • tables • how to accent your words We're about to: • How to make your website not look ugly • edit colors and sizes • position things anywhere • place pictures • place links • place a link when you click a picture • internal style sheet

Attributes and Elements 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.

Attributes and elements pt. 2 • The most common:color: ...sets the color, usually of a div or object. Values are usually simple, like black or red. You can also use hexadecimal values, which lets you select a very specific shade of color. A hexadecimal values has a hashtag followed by six letters or numbers. #cccccc is yellow or tan, I believe. • bgcolor="":...color sets a color if placed in the body tag. • background=""...if you place an image's URL in here, the background will be that photo. • id:""...gives this elements a very specific name that can be called upon. • getElementById: ...calls upon an ID to do something. • Changing the font, color or size of text requires a special tag called <font>. Font uses an equal sign instead of a colon and its values are within quoation marks. Such as <p><font color="red" size="3">random<font></p>.note that font is called face in the font tag.

Attributes and Elements pt. 3 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

Links and pictures *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.

Forms and input It's useful to have a submit form. Granted, without some javascript or similar knowledge they're kinda useless, but you can learn how to make them for now. A <input> tag is nested in a <form> tag. A basic form of input is a submit buton. It looks like this:<form> First Name(or whatever): <input type="text" name="firstname"> </form. 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.

Internal Style Sheet 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.

Positioning 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.

THe (somewhat)finished product 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.

INtro to HTML and Building Your First website