Web Development 101: HTMLCourse I

**spacejack** · 9th September 2015 00:56

Course Overview:

I will be creating posts in this thread designed to help you learn the basics of HTML.

This HTML course is designed for the most basic beginner. It assumes you know nothing about this topic. More topics like CSS will follow in another course.

It will be broken up into multiple posts within this thread.

Please do not respond to any posts in this thread. (to keep it clean)

Have a question? Here is the Q/A thread for this course:
https://projectavalon.net/forum4/show...L-Course-I-Q-A.

Lets get started!

--------
I'd like to just add why I want to teach members here about html, css, servers, etc.

This is a very loving community. I've only been here a short while but it is active, people are excited, and we want to expand our knowledge. Knowing how to do basic internet development is priceless. It provides an understanding to the mechanics that run most of the world today. Putting a science behind the magic. And hopefully this leads to more awareness, and gives members tools to share more information.

**Wide-Eyed** · 9th September 2015 01:19

let's or can we start by stating what all the acronyms are or creating a glossary of terms and acronyms

**spacejack** · 9th September 2015 01:21

What is HTML?

HTML stands for HyperText Markup Language. Created in the early 90s as a standard code for web browsers. Its the base language that all sites use to display information to you. This is code that is downloaded into the browser, and the browser converts into what it is supposed to be.

HTML is a markup language. This means that the main purpose to act as a shell for content. For example if you want to bold text, you would write HTML like this:
<b>Bold Me</b>

When the browser reads that, it would convert that text to bold and you wouldnt see the <b></b>. This is the HTML.

Anyone can take a text file and save it as a .html file and upload it. Just saving it as .html makes it a .html file now. But this will just show plain text. If you want to style that text into paragraphs, bold, headings, tables, lines, images, etc, you need to add HTML to that document.

There are several versions of HTML, each new version adding and deprecating certain values. We will stick to the basics for now, with some of the newer ways of writing added. The latest version is HTML 5 and is managed by W3C.

**spacejack** · 9th September 2015 01:32

Lesson I
Establish a workspace:
Before any lessons, we need to set an area to manage our projects. Create a new folder on your computer in a place like "My Documents" called "HTML Course". In the "HTML Course" folder, add a folder called "Lesson 1". "Lesson 1" will be our first project folder.

Create your first HTML doc:
Open notepad or similar basic text editing program.

Copy the text below:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Avalon HTML Lesson I</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Go to "Save As".
Filename: index.html
Save as type: All

Now go to your "Lesson 1" folder and double click the index.html file (or click and drag into a browser window. You should see the text without HTML code. This is your first HTML page.

Visit the link below to play with the code:
http://www.w3schools.com/html/tryit....ryhtml_default

Edit the code on the left, and it will show you what it would look like on the right (click the "See Result" button). You can copy the code on the left, and save within your "index.html" to have your own copy. Try editing some of the text to see what happens. Try to break it to see what happens.

What is this code:
<!DOCTYPE html> is telling the browser what language this file is. It is not required but good to include.

<html> </html> These are two tags to encase the entire html document. An open one, and close one. Anything in between is rendered as HTML by the browser.

<head> </head> Also two tags to encase a chunk. This is for the head of the document which contains things like the title.

<title> </title> this is the title of the document, shown at the very top (in the top of the browser window). Any text between the open and close will show in the title.

<body></body> this is the main content seen within the browser window.

<h1></h1> standard header tags. Put text in between to show as large font. You can also use <h2></h2>, <h3></h3>, all the way to 7. 7 Is the smallest, 1 is the largest

<p></p> standard paragraph tag. Breaks content up into chunks.

Pay close attention to the placement of the tags. When you see an open tag like <html> and a close tag like </html> (notice the /), picture drawing a box around everything.

For example: html is a box that contains head, title, body. The title is inside the head. And the head is beside the body. And the h1 and p are inside the body.

Questions about this Lesson? Ask it on the Questions thread:
https://projectavalon.net/forum4/show...L-Course-I-Q-A

**Karma Ninja** · 9th September 2015 04:09

Pretty cool. Thanks for doing this!

**Bubu** · 9th September 2015 09:17

Thread: Web Development 101: HTMLCourse I

Thread Tools

Web Development 101: HTMLCourse I

The Following 11 Users Say Thank You to spacejack For This Post:

Re: Web Development 101: HTMLCourse I

The Following 3 Users Say Thank You to Wide-Eyed For This Post:

Re: Web Development 101: HTMLCourse I

The Following 5 Users Say Thank You to spacejack For This Post:

Re: Web Development 101: HTMLCourse I

The Following 5 Users Say Thank You to spacejack For This Post:

Re: Web Development 101: HTMLCourse I

Re: Web Development 101: HTMLCourse I

Bookmarks

Bookmarks

Posting Permissions