Capital City Christian Church
PluggedIn IT Ministry



To start with, lets take a look at the three major components of today's WebPage; HTML, CSS, and Javascript.

Web pages and applications are today composed of three main components:

More specific to our work, let's compare HTML and CSS. Javascript will come later.


Definition of HTML

The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.

HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets. Tags such as <img /> and <input /> directly introduce content into the page. Other tags such as <p> surround and provide information about document text and may include other tags as sub-elements. Browsers do not display the HTML tags, but use them to interpret the content of the page.

HTML can embed programs written in a scripting language such as JavaScript, which affects the behavior and content of web pages. Inclusion of CSS defines the look and layout of content. The World Wide Web Consortium (W3C), former maintainer of the HTML and current maintainer of the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.

Reference: https://en.wikipedia.org/wiki/HTML


Introduction

HTML - stands for HyperText Markup Language

We will only address HTML in this page, but it is important to see how it is typically used.

For our purposes, HTML is used for documentation, reporting, note taking. Depending on specific projects, we will get into browser based Javascript, the Web Server's CGI layer, and RDBMS SQL.

HTML has become the standard for presenting static and dynamic material for general consumption. It is also used to create applications.

Modern HTML began as hand written 'mark-up' of newspaper and magazine 'copy' (text content). The 'mark-up' was manually added to instruct the printers all of the details regarding fonts, colors, placement of images, column arrangement, and the position of each thing to other things. Today, that mark-up language has been adapted to the digital world, specifically the browser environment.

The "web" paradigm consists of a 3-tier platform made up of a client browser for presentation, a web service as middleware, and an optional back-end datastore.

While there are many types and brands of each of these 3 tiers, each piece is usually interchangeable with any other. In other words, none of the layers should depend on which product is running at the other tiers.

When viewing a page, you can right click on an open area of the page (not on an element) and a pop-up menu will include viewing the source. Selecting this will open a new tab that displays the HTML (and other) code which is being used to render the current page. While viewing the source code, you can click on any hyperlink to see the additional files required to render the current page. These are usually CSS (Cascading Style Sheets) and portions of JavaScript.

Reviewing the source code is a great way to learn much more about HTML!

You can also press the F12 key to open your browsers development features. This will allow you to identify, study, and debug the current page.


3-Tier

Today's Webpage/Webapp - HTML, CSS, and JavaScript combine to create an interactive browser based environment that can a stand-alone application, or 'remote terminal', or some combination.


Structure

HTML or HyperText Markup Language is the standard markup language used to create Web pages.

Elements are encapsulated within tags that direct their rendering and characteristics. Some tags are singular such as <br> and <img>.

Within HTML code comments begin with "<!--" and end with "-->".

Within CSS or JavaScript comments begin with "/*" and end with "*/". They can also simply begin with "//".

Comments often contain developer notes and other confidential information, like passwords for example!

Basic Page Structure


HTML Tags

HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags. (https://www.javatpoint.com/html-tags)

TagUse
<html></html>Surrounds the entire page
<head></head>Top portion contains metadata, information about the page and how it is to be rendered.
<body></body>The bottom portion of the page, contains the material to be displayed
<script></script>Located at the end of the 'body' section. Contains scripting language code, usually JavaScript. Scripting code can also be located within many tags (refereed to as 'inline')
<title></title>Located within the 'head' section, this is the text that a browser will display in the tab containing this page.
<meta></meta>Metadata - information about information. Used to declare how the page is to be used along with its characteristics such as 'author'. Examples:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="-1">
<link rel="shortcut icon" href="favicon.ico">
Identifies the icon that the browser should use for this page. The name is always the same, but the content of the image differs. The file is always located in the root of the site.
<!-- material -->Comments the encapsulated material
<a></a>Hyperlink. This contains the address of a file that is to be jumped to when this tag is clicked.
<a name=''></a>Anchor. These are used to pinpoint a location in this page that a regular address hyperlink can point to.
<table></table>Table. A grid of rows and columns
<tr></tr>The start and stop of a 'table row'.
<td></td>Located within a 'tr' tag set, any number of 'td' tag sets will define the columns. Columns take up one column in the table, but can tbe expanded to cover more than one column when rendered.
<p></p>Paragraph.
<pre></pre>The pre tag encapsulates material that is to be rendered much more exactly to how it is written in the HTML source code. Carriage returns are required and not provided as with the p tag.
<fieldset></fieldset>The fieldset tag creates a box in which material can be sectioned off or grouped.
<legend></legend>The legend tag is often used with the fieldset tag to create a heading for the fieldset box.
<div></div>A div tag is similar to a fieldset.
<span></span>A span tag is similiar to a div tag, but does not force a carriage return after it's end.
<img>An img tag defines an image to be displayed. It's parameters define the size, location and other characteristics of the image.
<br>The br (break) tag is simply a carriage return
<hr>hr (horrizontal rule) is a horizontal line that is used to seperate sections.
<b></b>Material enclosed within the b tags is displayed as bold.
<u></u>Material displayed within the u tags is displayed as underlined.
<s></s>The s tag displays material with a strick through line.
<ul></ul>The ul tag creates an Unordered List, a dot-point list.
<ol></ol>While the ul tag creates an Unordered List, the ol creates an Ordered List causing the bullit points to be numbers.
<li></li>The li tag (List Item) defines each bullit point in either the ordered or unordered list.

Next we want to look at HTML in actual use. Open the HTML.Example.html page for a view under the hood.