Lesson 1

HTML BASICS

OBJECTIVE

How to properly write out HTML code and understanding the coding language.

PREREQUISITE

NONE NEEDED

What is HTML and CSS?

HTML stands for (HyperText Markup Language) which has two essential purposes hypertext and universality. This means that you can write out text with a link embedded to take you to the next page, and the web is accessible virtually from anywhere.

CSS on the other hand stands for (Cascading Style Sheets) this externernal linked file will add the defining details to your web page and make it stand out from the rest.

What is the role of the browser?

HTML, CSS and all other scripting codes need an application that will display the design and laout of your code with the use of popular browsers such as Firefox, Google Chrome, Internet Explorer, and others with the same capabilities. From these browser you will be able to link to many other pages included in your code.

What are the requirements of HTML tags?

Tags-All tags must have a open (<) and close (>) tag to complete it. For example you wouldn't start telling a joke to someone and then just walk off, instead you would finish it with a punch line.

Lowercase- All titles and names should be lowercase because of the sensitivity of the browsers when it scans through the code. If you need to make a title with more than one word, it's best to use underscores between words. For instance, like this: my_first_class_picture.jpeg.

Elements- Are a string of labels with identities that give the web page its structure like headers, paragraphs, and important information. Then the elements are given even deeper instructions called attributes. These attributes help discribe how the element and look like or act like.

Here is what a string of elements look like.

Proper Nesting- Proper nesting requires that you indent pieces of information such as headers, paragraphs, and other attributes that will make it easier for others, and yourself to read through the code incase changes need to be made.

Here is what proper nesting looks like.

Headers:

HTML heading are defined with the <h1> to <h6> tags and allows you to prioritize the topics of importance. The example below illustrates this by the text size changes, but by all means do not use headers to create bold text, instead use styles to bold the text.

Here is what the header code looks like:

Example

Here is what the header code looks like after the browser reads the code. It sizes the text by it's priority, by H1 being the largest to H6 being the smallest.

This is Header 1

This is Header 2

This is Header 3

This is Header 4

This is Header 5

This is Header 6

What are the requirements of HTML page?

There are a few Doctypes to fit every scenerio when building sites because this is the first thing the browser reads and determines what version of HTML will be used. Today we only need to focus on the two main Doctypes for HTML and HTML5, the others have stricter rules, but here are few examples of other Doctypes including what we will use.

HTML 5

HTML 4.01

HTML 1.0

QUIZ 1

Now let's see what your made of.