MODULE 1 INSTRUCTION

L. Roca

THE LANGUAGES

In Module 1, you are going to learn about the history and evolution of the web, the structure of HTML
code, the structure of web pages, how websites are published, etc. The first thing I would like to tell you
is to not feel overwhelmed about the language of the web. The key in learning HTML and CSS is to stay
organized. HTML is the acronym for hypertext markup language. It is a markup language, and it is the
method for coding lines of text to create web pages. To learn this language is similar to learning how to
speak Spanish, or French, it is just a language that helps people communicate visually and through
text. The other languages you will learn are CSS, which stands for Cascading Style Sheets, and a few
Javascript functions. Javascript is a subject all in itself, and it is beyond the scope of this course, but
nonetheless it is important to get a little familiar with this language.

HTML

So, what are these languages? Let’s start with HTML. HTML is an acronym for hypertext markup
language. It is the “text” part of a website. It is, well, what helps me format what I am typing right now; it
is what you tell the web that you are putting in writing in a certain way so that people can see the
distinction between your letter, words, expressions of ideas or information. HTML is the language that
helps words take a certain form. For example, when you write a term paper, you don’t do this:

The earth is round by student of celestial Things Introduction Today I was

watching the night sky when the thought came to me that the world is round……..

Imagine if we wrote an entire paper like that. No syntax, no capitals, no font size to establish what the
title of the paper is, who the author is, etc. So, we have established “rules” of engagement, per say, so
that our term paper can take a form in a way that the reader can identify the title, the author, the first
paragraph, and so on. So, we write our paper using rules as such:

Title in TimesNewRoman, font 12,

centered, hit return, enter text The Earth is Round
“by”,centered, hit return
By
Author in TimesNewRoman, font
12, centered, hit return, hit return
again Student of Celestial Things Introduction

Paragraph, in TimesNewRoman, Today I was watching the night sky when the thought
font 12, Flush left
came to me that the world is round……..

This is exactly what HTML is; it is the grammar-like rules that helps us tell a web server how to interpret
the code so that the content and structure of the web page can display our words in a format that we
can read. What this means is, the HTML is the code that servers are able to interpret so that it can
display lines of text in certain ways on a web browser.
 CSS

So, what is CSS. Back in the day, web developers began to desire a “better look” for their web pages.
So, the HTML language acquired more commands to enable developers to change the color, size, font,
etc., to lines of text. But at some point, it became a challenge to go back to every single line of text to
embed a code to make things distinct or uniform. Let’s go back to the term paper, with a few more lines
of text.

The Earth is Round

By

Student of Celestial Things

Introduction

Paragraph 1 - Today I was watching the night sky when the thought came to me that the world is
round. Lorem ipsum dolor sit amet, ut ac suspendisse mauris eget viverra, donec tincidunt metus
quam pharetra lacus. Viverra leo ac auctor.

Why The Earth is Round

Paragraph 2 - I discuss why the earth is round. Lorem ipsum dolor sit amet, ut ac suspendisse
mauris eget viverra, donec tincidunt metus quam pharetra lacus. Viverra leo ac auctor. Morbi

Who Saw it First

Paragraph 3 - I discuss who discovered the earth is round. Lorem ipsum dolor sit amet, ut ac
suspendisse mauris eget viverra, donec tincidunt metus quam pharetra lacus. Viverra leo ac

In looking at my paper, I decide I want all subtitles in 14-point font, Helvetica, centered, with red letters.
And I want all my paragraphs in 10-point font, Times New Roman, flushed left, in blue letters. For each
one of these items, web developers had to enter the same command, time and time again, and then it
occurred to them, what if we add commands in a separate page (external CSS) or in a separate area
within a page (internal CSS), link that “commands” page or section to the HTML page and then, html
page can apply those commands in one step. That would take care of all that repetitive, tedious
formatting work. And it did. That is what cascading style sheets are, a fancy name for accumulating all
the formatting commands so that you don’t have to go through the tedious job of formatting every single
line of text in your page. Many styling commands have been developed, but don’t worry what the styles
are yet, you will be learning those styles as you progress through the course.

Javascript

So, what is Javascript? Javascript is what makes the website interactive, it gives it a heart, per
say. Javascript gives your website motion. For this course, this is pretty much all you need to know
about Javascript. Later you will learn a few Javascript commands so that you can experience the magic
of Javascript. For this course, you are mainly going to focus on HTML and CSS.

STRUCTURE OF THE LANGUAGES

HTML
When you go to a dark room, you cannot see anything, you have no idea what is inside the room. In
order to see inside the room, you need to turn the light switch up. You flip the light switch up, light
floods the room and you see everything inside. When you leave the room, you flip the light switch down,
the light turns off and nothing is seen anymore. HTML turns the switch of a command on so that the
web server can see and do what the command indicates, until that command is turned off. Simple!

• To turn the switch on, the code looks like this: <command>
• To turn the switch off, the code looks like this: </command> Notice the forward-slash? The off
switch will have a forward slash in front of the command. Never use a back-slash.
• Of course, as it is the case with the English language, there are always exceptions to the rule,
but most all HTML commands will have an on switch and an off switch. You will learn about the
exceptions later.

For example, in order to write the paper above using HTML, it would look like this:

<h2>The Earth is Round</h2>

<br>

<h3>By</h3>

<br>

<h3>Student of Celestial Things</h3>

<h3>Introduction</h3>

<p>Paragraph 1 - Today I was watching the night sky when the thought came to me that the world is
round. Lorem ipsum dolor sit amet, ut ac suspendisse mauris eget viverra, donec tincidunt metus quam
pharetra lacus. Viverra leo ac auctor. </p>

CSS

So how do we make CSS talk to HTML to center my paper above, change the font size, and the font
style? Each HTML command has an assigned name. For example, <p> is a command that tells the
website to read a line of text as a paragraph, and </p> is the command that tells a website that the
paragraph is “turned-off” at that junction. In order to tell CSS how to make the paragraph look a certain
way, you have to say to CSS: “I want my paragraph to look like “this” and like “that”. CSS commands
are called styles, and the code is written like this:

Tag name

{ CSS command 1: CSS command attribute 1;

CSS command 2: CSS command attribute 2;

}
Notice the curly parenthesis and the semicolon? This is the way you communicate to a server that you
want your lines of text to look a certain way. Example, earlier I said I wanted my paragraph to appear as
follows, so I entered the styles in CSS like this:

{color: blue;

font: Times New Roman;

font-size: 12pt

CSS can be written within a web page or have it’s own folder and file that can be connected to an HTML
page. The former is called an internal CSS, and the latter is called an External CSS. Before I get too far
ahead of myself, let’s begin by learning the structure of a web page.

STRUCTURE OF THE A WEBPAGE

You know how, when you are writing a major paper, you have to have a cover page, header, footer, etc.
surrounding the body of your paper? A website also needs to have a cover page (the homepage), a
header, a footer, surrounding the body of the webpage. First, the cover page is always called index.html,
and the cover page is the homepage of any website. “index” tells the server, “this is where it all begins.”
Let’s see what the HTML commands to structure the header, body, and footer of a webpage look like:

First off, we need to tell the web what kind of website we have and what kind of language we are writing
our code in. When I say language, I mean is it HTML5, HTML4, etc. You will be learning HTML5. After
we make the declaration, and we indicate the markup language, we designate a header, body, and
footer. This way the web knows how your web page will be initially structured. To write a basic structure
of a web page you will write your code like this. We omit the “5” from html because the server assumes
this is the latest version:

<!DOCTYPE html>

<html>

<!—This section is for comments à

<head>

</head>

<body>

<p>HELLO WORLD! This is my first web page!

</body>

<footer>

</footer>

</htm>
Let’s learn a few commands

So why did I put the lesser-than, greater-than, and exclamation sign, around my
comments? <!—comment -->. This is how you can communicate to the server that what you
are writing is only personal comments to yourself about your web page, and the comments can be
ignored. Comments will help when you get to write more sophisticated coding, as things can get visually
overwhelming if your code is not well organized. Part of that organization includes writing notes to
yourself to guide you in identifying groups of coding, and give you landmarks!

Congratulations, so now, you know how to structure a web page. Now try it yourself. Go to the exercises
page, and then assignments page to create your first web page.

Copyright@2018 L.Roca