Lesson 1

Foundational HTML-CSS

Hypertext Markup Language  is the computer language used for creating documents to be displayed on the Web.

HTML file name examples:

home.html

about.html

contact.html

HTML It is a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages. ~dictionary definition

An HTML document is a text file named with the .html extension. It is made up of tags and text.

Tags are keywords that instruct the browser how to format and display content on the Web.

All tags are enclosed in brackets <>.  Most tags must have an opening and a closing part. Examples:

Single Tags:

<br>

<img>

<hr>

Paired Tags:

<head>...</head>

<p>...</p>

<h1>...</h1>


Let’s create our first Web page.

  1. Create a folder on your desktop and name it Awesome Website. This is where you will save all the web pages (and their components) that we will be making throughout the lessons.

  2. Open your editor (Sublime Text)  and create a new file.

  3. Save it as home.html  (inside the Awesome Website folder)

  4. Now type this up:

<html>

 
html2.png
 

Notice that as you are typing, the editor automatically loads up a bunch of lines for you.  Don’t delete them, press return instead. You’re lucky you don’t have to type them all up - that prevents syntax typos!


Let’s see what each line means…


<!DOCTYPE html>

The <!DOCTYPE> declaration is not an HTML tag.

It is an instruction to the web browser about what version of HTML the page is written in, so that the browser knows what type of document to expect.

Declaration is NOT case sensitive.


<html>

This is the start <html> tag

The <html> element defines the whole document.


<head>

The <head> element is a container for all the head elements, which will be explained as we encounter them.

The <head> element can include a title for the document, scripts, styles, meta information, and more.

In HTML5, the <head> element can be omitted.


<title></title>

The <title> tag is required in all HTML documents.


</head>

This is the end </head> tag.


<body>

This is the start <body> tag.

The <body> element defines the document body.


</body>

This is the end </body> tag.


</html>

This is the end </html> tag.


<title></title>

Insert this line of text between your title tags:

Awesome Website - Home.

Result:

<title>Awesome Website - Home</title>

Awesome Website - Home  will now be:

  • the title that appears in the browser toolbar

  • the title for the page when it is added to favorites

  • the title for the page in search-engine results

Time for a heading…

Place your cursor between  the <body> </body> tags

Type in <h  and you should see a list of suggestions.

Select  h1  tag and the editor should give you <h1></h1>

 
unnamed.png
 

Now type in HTML is Fun inside your h1 tags

It should look like this:

 
unnamed.png
 

Important:

The <h1> to <h6> tags are used to define HTML headings. They give structure to your content; DO NOT use heading tags  just to make your text big or bold.

Heading tags are, by default, formatted from largest<h1> to smallest <h6>, and in order of importance. Use them in this hierarchical fashion: nest lower ranks inside higher ranks. Start a new section if you need to use a new high rank. If you need to use another H1, start a new page.

We’ll learn more about this later.


Type in <h  again and you should see a list of suggestions again.

Select  h2  tag and the editor should give you <h2></h2>

Now type in ...When you have an awesome teacher!  inside your h2 tags

 
unnamed.png
 

Now that the page has some cool headings, let’s build paragraphs...

<p></p>

On the next line, type in <p and select p tag (paragraph tag)

 
unnamed.png
 

We need some placeholder text, so go to https://loremipsum.io/

Click “COPY”.

 
lorem.png
 

Paste that content between the <p> tags and you have a paragraph.

 
unnamed.png
 

Save your file  by hitting control-S or command-S.

Go to your Awesome Website folder

 
folder.png

Double-click on home.html.

A browser window or tab should show you your work..

 
unnamed.png
 

Before we wrap up today’s lesson, let’s give your first web page a nice little styling...


Inside the start <body> tag, type in the letter s and hit the Return key.

 
unnamed.png
 

Now your page is ready for some style.

 
unnamed.png
 

Type these declarations inside the quotes.

width: 80%;

border: 1px solid gray;

margin: auto;

padding: 20px

Pretty self-explanatory, but we will be discussing this on our next lesson.

 
unnamed.png
 

Save your work and refresh your webpage.

Now you have a responsive page. This means that you can size your browser up or down and your page should magically resize!

 
unnamed.jpg
 

You can try tweaking your declaration values and see what happens:

width: 90%;

border: 10px dotted red;

margin: auto;

padding: 50px

OR

width: 75%;

border: 3px dashed blue;

margin: auto;

padding: 10%

That’s it for today!

Don’t forget to try the two the post-lesson exercises I will be posting here!


~Grace 




 
Grace SteeleComment