I briefly mentioned elements in a previous post, but now I'll go into detail about them. HTML elements are everything from the opening tag to the closing tag, including the tags themselves. The element content is everything between the tags, which in some cases is nothing. When the element is empty, it's called (don't have to think much here) an empty element.
As you begin coding, you'll start creating nested HTML elements. That just means they contain other HTML elements. For example, the code below contains three nested elements:
<!DOCTYPE html>
<html>
<body>
<p>Yup, still a paragraph.</p>
</body>
</html>
Remember, always put an end tag! Some browsers will work fine if you forget it, but it's better to be safe than sorry. It sucks when you spend hours coding something, only to get an error because you missed a closing tag.
Monday, April 21, 2014
Sunday, April 20, 2014
Keeping It Basic
Page Structure
As previously mentioned, an HTML document is just a set of tags within other tags. Here's a better way to visualize that:
Tags
HTML markup tags, more commonly known as HTML tags, are keywords, or tag names, surrounded by angle brackets < >. Most of the time, these tags will come in pairs. The first tag, also known as the opening tag, is written as a keyword surrounded by two angle brackets, like <html>. The second tag, or the closing tag, is written with a forward slash before the tag name, like </html>.
<tagname>content</tagname>
Headings
To create a heading, you can use tags <h1> to <h6>. Headings are displayed with a font size larger than that of the default font, and the number within the heading tag specifies the level of heading being used. As the number increases, the font size decreases. For example:<h1> Heading 1 </h1> Heading 1
<h2> Heading 2 </h2> Heading 2
<h3> Heading 3 </h3> Heading 3
Paragraphs
These ones are easy. Just use the <p> tag:
<p>paragraph</p>
Links
If you want to display a link, you'll use the <a> tag, but with a slight edit to the full tag name. After the "a" in the opening tag, you'll type href="linkhere", replacing the linkhere with your link address.
<a href="linkhere">Link</a>
Images
Images work similar to links, in that you'll slightly change the opening tag, which is <img> in this case. The full opening tag will look something like this:
<img src="imagehere.jpg" alt="alternatetext" width="100" height="100">
You would replace the imagehere.jpg with your image's file name, and the 100's with whatever size you want to specify. I won't completely describe the alt="alternatetext" quite yet, as attributes are going to require another lesson, but basically, whatever replaces alternatetext will appear if the image doesn't load.
What is HTML?
So there's this thing called HTML, aka Hyper Text Markup Language. This language is just a long set of what are called markup tags, which describe the content of the document you're making. These HTML documents contain HTML tags, as well as regular text, and are also known as web pages. Lots of new words, huh? You might want to get used to that.
Now that you know what an HTML document is, you probably want to know how to actually view one. That's what web browsers are for (i.e. Chrome, Safari, Internet Explorer). When you use a web browser to read an HTML document, it displays the document as a web page without the tags. Here's an example to help explain the difference between the code itself, and a web page display:
Side note-I'll go into detail about specific tags in another post, but to avoid some confusion, the <!DOCTYPE html> tag in the example above is actually a declaration that defines what type of document is being used, so the browser can correctly display the web page. In this case, <!DOCTYPE html> is the doctype for HTML5.
When coming up with simple code, using the Notepad program is perfect (find it in the Accessories folder of your programs). Just type your code into it, and when you save, edit the file name to end with .html. Now you can find that file, and it will open up as a web page into whatever your default web browser is. Simple enough, right? Now we can start learning about putting actual content into your code.
Now that you know what an HTML document is, you probably want to know how to actually view one. That's what web browsers are for (i.e. Chrome, Safari, Internet Explorer). When you use a web browser to read an HTML document, it displays the document as a web page without the tags. Here's an example to help explain the difference between the code itself, and a web page display:
 |
| This is what your code looks like. |
 |
| After opening your file as a web page, the tags disappear. |
Side note-I'll go into detail about specific tags in another post, but to avoid some confusion, the <!DOCTYPE html> tag in the example above is actually a declaration that defines what type of document is being used, so the browser can correctly display the web page. In this case, <!DOCTYPE html> is the doctype for HTML5.
When coming up with simple code, using the Notepad program is perfect (find it in the Accessories folder of your programs). Just type your code into it, and when you save, edit the file name to end with .html. Now you can find that file, and it will open up as a web page into whatever your default web browser is. Simple enough, right? Now we can start learning about putting actual content into your code.
A Clueless Beginning
I guess I should start with some introductions before diving into actual content. My name is Jessica, and as of about an hour ago, I've made a goal for myself; I want to learn how to code with HTML. Not a traditional goal by any means, but with an empty summer schedule ahead of me, I figure it's the perfect time to try something new, right? I decided to make this blog for two reasons; one, so I can take anything I learn and put it into words I actually understand, and two, so anyone else trying to learn to code can use this as sort of a Coding for Dummies type of thing. Considering the last time I coded for a website was in the seventh grade, I'm starting from the very bottom, as in, what does HTML even stand for. Hopefully you find this blog somewhat useful, and if not, maybe you'll find some entertainment in following my adventures as I venture into the coding world.
I guess I should start with some introductions before diving into actual content. My name is Jessica, and as of about an hour ago, I've made a goal for myself; I want to learn how to code with HTML. Not a traditional goal by any means, but with an empty summer schedule ahead of me, I figure it's the perfect time to try something new, right? I decided to make this blog for two reasons; one, so I can take anything I learn and put it into words I actually understand, and two, so anyone else trying to learn to code can use this as sort of a Coding for Dummies type of thing. Considering the last time I coded for a website was in the seventh grade, I'm starting from the very bottom, as in, what does HTML even stand for. Hopefully you find this blog somewhat useful, and if not, maybe you'll find some entertainment in following my adventures as I venture into the coding world.
Subscribe to:
Posts (Atom)
