Okay, so what is HTML? Well, Hyper-Text Markup Language is what the web is built with. It's a plain text file, formatted a special way, that the web browser reads and translates into the page you see. HTML is about structure, about describing text. Then CSS gets added to control the presentation (how the text looks). Then JavaScript gets added to make the text act and react to events. It's kind of what's called the Model-View-Controller pattern. Of course, the lines get a little blurry, all three touch on the other's responsibilities, but it's a useful starting point. So, since I'm going to be covering just HTML, these examples are going to be ugly. That's okay. Tomorrow I'll add some CSS and make them pretty, then the day after I'll add some JavaScript to make them dynamic.
Starting up NetBeans (my editor of choice) and using it's plugin with Chrome, let's look at a basic, starting file...
Not much to look at. The first thing to point out is that HTML uses "tags," pairs of <element> </element> to define what a section of code is. The <html> tag is the whole document (which the <!DOCTYPE html> says is, well, html). The <head> tag holds some general information for the page, which isn't displayed in the browser. The <title> tag puts the name of the webpage at the top of the window, and the <meta> tags have some information about the page that other computers or the browser use.
The real magic is everything in the <body> tag, which is the main body of the document that gets shown to the user. A <div> is a division or a "block" of text. Related to it is a <span> which is "in-line" or it marks a section of text inside another container. Let me throw a bit of styling in here and show you...
While I'm going to end up using a whole lot of <div>s and <spans>s, there are lots of other other block-level tags.
Headings <h1> through <h6> denote a, well, heading, from largest <h1> to smallest <h6>...
Typically, you'll have some paragraphs <p> after your headings...
Plain text is boring, so let's add an image with the <img> tag...
The <img> tag bring us something else to note. So far we'd been using the tags themselves, called "elements," but an element can also have "attributes" that have a ' name="value" ' format. In this case, the <img> or image element has 2 attributes, "src" (or 'source') and "alt" (or 'alternate,' what to show if the image itself can't be shown).
Two attributes we're going to use a lot are "Class" and "ID". Adding one of these attributes (to any element) let's us pick them out specifically to add some kind of styling or events. A quick example, I'm going to make 2 classes, 'yellow' and 'bold', plus one ID of 'redbox'...
Wow, that didn't look like anything at all. Of course not, just defining the classes and IDs doesn't do anything, we have to tie something else to those "selectors." Let's add a little CSS to make them pop...
As you can see, you can add multiple classes to one element, and multiple elements can have the same class - but IDs must be unique, only 1 to the page.
Besides just printing out text, we can format it into lists. The <ul> tag creates an "unordered list" (of bullet points) while the <ol> tag creates an "ordered list" (which is numbered). For both, each specific line of the list is created with a <li> tag...
We can also make tables. This gets a little complicated- we start with a <table> tag. Under (or "nested in") that we put a <tr> for each table row and in each row we put either a <th> for the table header (which has it's own tag since often we'll mess around with the data in the table but leave the header alone) or a <td> for each table data (or "cell"). Here, take a look...
And we can make forms, which allow us to get input from the user (like when they're making a character). Again we'll start off with a <form> element to hold everything. The individual parts are mostly <input> elements that have a special attribute "type" that says what kind of input they are...
<input type="text"> gives us a textbox, something fairly small for the user to type in. <input type="radio"> gives a radio button, where only one of the group can be clicked on, while <input type="checkbox"> let's any number of boxes be checked. <textarea> gives us an ever bigger, multi-line place to type things.
Okay, so we've covered some basic ways we can layout the page. I've added some styling to point out things above, but tomorrow we'll go into more depth with CSS and controlling how things look.
This was meant to be a fast, whirlwind introduction, so of course there is a whole lot more to HTML than what I've shown here. A great place to learn more is at w3schools.com.
No comments:
Post a Comment