Category Archives: HTML Lessons
HTML for Beginners | Lesson 3: Links
Without links, the Internet wouldn’t be the same. Links are what take us from page to page or even open up an email client to send a message to someone. Links are everything!
Tag:
The tag you write onto your page has an opening and closing tag. The opening tag for a link is <a href=”location”> and the closing tag is </a>. Where ever you want your link to take you, you replace that with location in your opening tag and what ever you want to be clicked to take you to that link you write that in between the opening and closing tag. For example if you want a link to Apple, you can use <a href=”http://www.apple.com>Apple</a>
Linking HTML Pages:
If you want to link to a different HTML page that you have in the same folder your index.htm file is in, you don’t need the domain name, just the filename. So for example, if you have a contact page you want to link to, all you need to write for your code is <a href=”contactme.htm”>Contact Me</a>
Linking to Email:
If you want to link to an email address so that an email client will open and you will be able to start messaging people, all you need to do is insert mailto:emailaddress in between your quotations in your opening tag. For example it would look like this, <a href=”mailto:example@gmail.com”>Email Me</a>. Once this is clicked on your page it will open up a email for you.
HTML Used in this Lesson:
<html>
<head>
<title>Test Website</title>
</head>
<body bgcolor=”33EE77″>
<hr size=7>
<center><h1>Welcome!</h1></center>
<a href=”http://www.apple.com”>Apple</a>
<a href=”contactme.htm”>Contact Me</a>
<a href=”mailto:testemail@gmail.com”>Email Me</a>
<hr size=7>
<br>
<center><p>This is a website I am making to help people with HTML. With these lessons we are just going to keep adding on to what we know, and to our code. So lets get started. First of all, HTML stands for Hypertext Markup Language, it is basically the world wide webs language. HTML is what makes up a website. How HTML works is that it is based on code that you write, this code tells the website you are creating how to look and what to do.</p></center>
</body>
</html>
***Next Lesson: Pictures***
HTML for Beginners | Lesson 2: Background Color & Common Tags
Background Color-
The first thing in today’s lesson is going to be background color. It is very simple to change your background color, go to your <body> tag in your HTML and change it to <body bgcolor= ” “> and inside those quotation marks you either choose a regular color like “yellow” or blue etc. but you can also put other shades of colors with some HTML color codes. For example, “33EE77″ when I put that into <body bgcolor=”33EE77″> and save it, it will change the background color to a shade of green. See, it is very simple and that is all you need to know about background color!
Common Tags-
- Headers-
Usually headers tell you what a page is about but you can use them in a way of increasing and decreasing the size of your text. Headers come in 6 sizes. 1 being the biggest and 6 being the smallest. The tag for headers has a open and closing tag, and your text would go in between. Tag for header: <h1>Header Size 1</h1> You would substitute the number 1 for the size you want. Remember 1 through 6!
- Ruled Lines-
These are not really important but if you want to use them to seperate something on a page. You can also edit these to any width, size, color, or any kind of atribute and they do not need a closing tag. Tag for a Ruled line: <hr size=7> this will make a line across your page.
- Paragraphs and Skipping Lines-
Usually when writing in your HTML document for paragraphs and single sentences you put a <p> at the beginning of your text and a </p> at the end of your text. This just seperates your paragraphs neatly without haveing your text all bunched up. You can also skip lines by using the tag <br> as many times as you want to go down on your page.
- Lettering-
<b>This is bold text</b>
<I>This text is in italics</I>
<U>This text is underlined</U>
<tt>This text is in typer writter format</tt>
<center>This text is centered</center>
HTML in this Lesson-
<html>
<head>
<title>Test Website</title>
</head>
<body bgcolor=”33EE77″>
<h1>This is the text size of header1</h1>
<h2>This is the text size of header2</h2>
<h3>This is the text size of header3</h3>
<h4>This is the text size of header4</h4>
<h5>This is the text size of header5</h5>
<h6>This is the text size of header6</h6>
<br>
<p>This is a website I am making to help people with HTML. With these lessons we are just going to keep adding on to what we know, and to our code. So lets get started. First of all, HTML stands for HyperTest Markup Language, it is basically the world wide webs language. HTML is what makes up a website. How HTML works is that it is based on code that you write, this code tells the website you are creating how to look and what to do.</p>
<br>
<b>This is bold text</b>
<br>
<I>This text is in italics</I>
<br>
<U>This text is underlined</U>
<br>
<tt>This text is in typer writter format</tt>
<br>
<center>This text is centered</center>
<hr size=7>
</body>
</html>
*Next Lesson: Links*
HTML for Beginners | Lesson 1: The Basics
Explanation:
This is the first lesson of my many html lessons, you can also see it put to use in my videos on youtube. With these lessons we are just going to keep adding on to what we know, and to our code. So lets get started. First of all, HTML stands for HyperTest Markup Language, it is basically the world wide webs language. HTML is what makes up a website, this post your reading right now is on a html website. How HTML works is that it is based on code that you write, this code tells the website you are creating how to look and what to do.
Where to write your HTML:
You write code in a plain text editor or word processor. If you are running a Mac you can use TextEdit and if you are on a Windows computer you can use Notepad. You could also use Adobe Dreamweaver, which will work on all platforms. But no matter what plain text editor you use, it can be viewed, edited and shared on all platforms and operating systems.
Angle Brackets & Tags:
Now when you start writing your code, you will be using angle brackets a lot. Insted of using normal brackets like “( )” in HTML you use “< >”. You use these brackets in things called “tags”. A tag is written in your code to tell the text between it to do a certain thing. An example of a tag is <html>. Tags make up the structure of a HTML document. When you are writing tags you need to have a open and closing tag. A closing tag always contains a “/” within the angle brackets, like this </html>. So an example of a open and closing tag would be, <html> </html>. It is very very simple.
Saving with Extensions:
Now, HTML files are normal files with just a special extension so that your internet browser is able to read it and display it as a webpage. The extensions you need to save with your file are .htm .html or .shtml all those extensions should work the same. In the end if you are going to be publishing your website, make sure your homepage or main page when people visit your site is saved at index.htm or anyone of those other extensions.
Parts of a HTML Document:
Within a HTML file it has two main parts, a head and a body. The head contains all the important title information like what you see above the URL of a website in your internet browser and the body contains everything else, like your content and things like that.
HTML Basic Structure:
<html>
<head>
<title>Title goes here</title>
</head>
<body>
</body>
</html>
***Next Lesson:***
Background Color & Common Tags
HTML From This Lesson:
<html>
<head>
<title>Test Website</title>
</head>
<body>
This is where the text and all your content will go.
</body>
</html>
