CSCI-1080 Intro To CS: Web Development
Saint Louis University
Department of Computer Science
Introduction to HTML
List of learning outcomes
By the end of this study session you will be able to:
Understand the difference between HTML CSS and Javascript
Recognize a few simple HTML tags
So what is HTML?
What does the term HTML mean and how does it relate to the web? In this study section we will overview at the high level the three technologies that drive web development: HTML, CSS and JavaScript.
Where does HTML fit? Precisely what role does HTML play in web development? As we progress with the course, you will see that understanding the answers to these simple questions will actually help you to make correct web developing decisions.
HTML is an acronym for Hyper Text Markup Language.
HyperText is text that contains links to other texts. One document points to another document which points to other documents; the list grows on and on. Sometimes documents have links back to the original document. All these links form one gigantic “web”. Not only text but nowadays hypermedia plays a huge role in the web. We can watch videos, listen to music etc. Hypermedia is just an extension of hypertext.
Markup. This literally means to mark something up, that is, to annotate. Annotate refers to content, for example a document.
The content you want to annotate will tell the browser (the program that reads webpages), what this content is about. So HTML surrounds (wraps) that content in some markup language. These markups are called tags.
Example 1: HTML tags
<!doctype html>
<html>
<head>
<title> Welcome to my Blog </title>
</head>
<body> some more text
</body>
You can see here how Welcome to my Blog is wrapped around the title tag; this tag tells us and the browser that this is the title of this document. As you can see from the example, HTML is human readable. So these tags appear as instructions for a document structure. Structure means that we do not need to run the code through some interpreter (compiler) to understand the output structure. It's very clear to a human what it is.
Language. This keyword implies a syntax; there is a right and a wrong way to code it. Consider these examples:
Example 2: Wrong HTML syntax
<h1> This is an header </div>
Example 3: Correct HTML syntax
<h1> This is an header </h1>
In the Example 2 the closing div tag appears after the opening h1 tag. This may cause parsing and potentially rendering errors.
So HTML is language. You could actually code it up in a way such that something is wrong and something will break. HTML also has its own semantics; this means that tag names can mean something either to machines or to humans.
The Three Technologies That Drive the Web: HTML, CSS and JavaScript
Let us now discuss the three technologies that drive the web. Each one has its own distinctive purpose and all three fit very nicely together. Let's start with HTML.
HTML provides the structure which means what components does the HTML document have? For example, it can have one heading, two paragraphs, and a footer. Note that this does not tell you anything about how these components are visually laid out, what they look like, what color they are, what font size they are. It only tells you what are the components. Like in a house if you have three rooms and a kitchen you don't really know what color the kitchen is, what color the walls of the kitchen. The only thing you know is what components make up the house.
The color and style is the role of CSS. So colors, layouts, font style, font sizes, in other words any style. For example, if we have a heading in our HTML document, it will tell us what color, what font size it is.
JavaScript, provides behavior and functionality. It adds functionality to the page, so for example what happens when HTML document finishes loading into the browser? Or what happens if I click on one of the headings? That's the job of JavaScript to provide that behavior.
|