UCONN Stamford Google Cloud Development Platform: HTML Explained

HTML Primer

Note:

The average Web Developer salary in the United States is $100,099 as of August 27, 2023. Salary.com.

HTML was developed from the prototype written by Tim Berners-Lee in 1992.

The World Wide Web began at Geneva, Switzerland. CERN is a meeting place for physicists from all over the world

Enabling researchers from remote sites in the world to organize and pool together information.

Making available a large number of research documents as files that could be downloaded to link the text in the files themselves.

Cross-references from one research paper to another.

Tim's prototype Web browser on the NeXT computer came out in 1990.

Domain name system had made it much easier to address a machine on the Internet.

In the late 1980s, Bill Atkinson(Apple) application called Hypercard. Hypercard `filing cards' contained textual and graphical information.

Domain name letters separated by dots, `www.bo.com'

Names are the easy-to-use unlike IP address numbers.

Distributed Name Service (DNS) maps domain names onto IP addresses, DNS was a breakthrough in making the Internet accessible.

A simple protocol - HTTP - for retrieving other documents' text via hypertext links. HTTP stands for HyperText Transfer Protocol.

The text format for HTTP was named HTML, for HyperText Mark-up Language.

HTML was based on SGML (Standard Generalized Mark-up Language), agreed upon method for marking up text into structural units.

SGML implemented on any machine.

Language was independent of the formatter (the browser or other viewing software) which displayed the text.

Pairs of tags <TITLE> and </TITLE> is taken directly from SGML.

HTML included P (paragraph); H1 through H6 (heading level 1 through heading level 6); OL (ordered lists); UL (unordered lists); LI (list items) and various others.

HREF attribute was Tim's invention and www.name.name' format for addressing machines on the Web.

Use of the anchor element A for creating hypertext links, was what made Tim's invention so useful.

Joseph Hardin and Dave Thompson, connect to the computer at CERN and download copies of two free Web browsers.

Decided to develop a browser of their own to be called Mosaic.

Marc Andreessen idea for the IMG tag by the Mosaic team.

Marc Andreessen formed Netscape Communications Corp. in November, 1994. What they planned to do was create and market their very own browser.

Version 1.0 of Microsoft Corp.'s Internet Explorer browser was announced. This browser was eventually to compete with Netscape's browser.

CSS starts in 1994. Håkon Wium Lie works at CERN. is starting to be used as a platform for electronic publishing.

Way to style documents.

The separation of document structure from the document's layout.

Determine the style with a simple style sheet. How to change fonts and colors of elements.

Håkon published the first draft of the Cascading HTML Style Sheets proposal.

Design goal in CSS and HTML was soon removed from the title of the specification.

CSS took into account that on the Web, the style of a document couldn't be designed by the author or the reader, cascaded, in some way; the capabilities of the display device and the browser.

As planned, the initial CSS proposal was presented at the Web conference in Chicago in November 1994.

The concept of a balance between author and user preferences was novel.

At the end of 1995, W3C set up the HTML Editorial Review Board (HTML ERB) to ratify future HTML specifications.

CSS specification was taken up as a work item with the goal of making it into a W3C Recommendation. Among the members of the HTML ERB was Lou Montulli of Netscape. After Microsoft signaled that it was adding CSS support in its browser, it was also important to get Netscape on board.

The first commercial browser to support CSS was Microsoft's Internet Explorer 3, which was released in August 1996.

IE3 reliably supports most of the color, background, font, and text properties,

The next browser to support CSS was Netscape Navigator, version 4.0.

Netscape implemented CSS internally by translating CSS rules into snippets of JavaScript, which were then run along with other scripts.

JavaScript was invented by Brendan Eich in 1995.

It was developed for Netscape 2, and became the ECMA-262 standard in 1997.

After Netscape handed JavaScript over to ECMA, the Mozilla foundation continued to develop JavaScript for the Firefox browser. Mozilla's latest version was 1.8.5. (Identical to ES5).

Internet Explorer (IE4) was the first browser to support ECMA-262 Edition 1 (ES1).

What is HTML?

Hypertext Markup Language (HTML) is the language for describing the structure of Web pages. HTML gives authors the means to:

Publish online documents with headings, text, tables, lists, photos, etc.

Retrieve online information via hypertext links, at the click of a button.

Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products

Include spread-sheets, video clips, sound clips, and other applications directly in their documents.

An HTML document is a text document that you can produce using any text editor.

HTML documents contain elements surrounded by tags—text that starts with a < symbol and ends with a > symbol.

An example of a tag is <img src="home.gif"/>.

Simple Tags

<H1> First heading largest size

<P> Start a paragraph

<A> anchor

The <A> element, or anchor element, it used to create a hyperlink to

another webpage or another location within the same webpage.

Opening Tag Ending Tag

<TAGNAME> CONTENT </TAGNAME>

HTML can include directives for formatting in

Cascading Style Sheets (CSS) - directives for formatting.

JavaScript - Programs for interaction.

Browsers, such as Firefox and Chrome, interpret the HTML

along with any CSS and JavaScript to produce what we

experience when we visit a website.

HTML holds the content of the website
CSS specifies the formatting
JavaScript programming used to make the website dynamic and interactive.

BASIC HTML STRUCTURE AND TAGS

HTML begins with a starting tag, followed by an ending tag.

The ending tag includes a / symbol followed by the element type,

A standard HTML document looks like this:

Simple.html

=================================================

<!DOCTYPE html>

<html>

<head>

<title>Very simple example

</title>

</head>

<body>

This will appear as is.

</body>

</html>

=================================================

The HTML element indicated by the starting tag <html> and

ending with the closing tag: </html>

The <head> element is a container for metadata (data about data)

and is placed between the <html> tag and the <body> tag.

HTML metadata is data about the HTML document.

Metadata is not displayed and typically defines:

Document title
Character set
Styles
Scripts
Other meta information.

Title will display on the web browser giving users clarity on what the page is about.

Most of the content delivered will be delivered within the body tags

<!DOCTYPE html> is used to inform that the document is an HTML document.

Every HTML document should begin <!DOCTYPE html>.

Some other simple tags

Heading tags H1 to H6 scale down in size

headIings.html

==========================================

<!DOCTYPE html>

<html>

<head>

<title>Headings

</title>

</head>

<body>

<H1> HEADING 1 </H1>

<H2> HEADING 2 </H2>

<H3> HEADING 3 </H3>

<H4> HEADING 4 </H4>

<H5> HEADING 5 </H5>

<H6> HEADING 6 </H6>

</body>

</html>

=================================================

Some other simple tags

<pre> Creates preformatted text</pre>
<em>Creates address section, usually processed in italics</em>
<strong> Emphasizes a word (usually processed in italics) </strong>
<p> Creates a new paragraph</p>
<br>Inserts a line break (carriage return)<br>
<blockquote> Puts content in a quote - indents text from both sides</blockquote>
<div>Used to format block content with CSS </div>

Lists

<ul> Creates an unordered list

<li>Encompasses each list item </li>

</ul>

<ol> Creates an ordered list

<li>first</li>

<li>second</li>

</ol>

Creates an ordered list (start=xx, where xx is a counting number)

HTML Tags

===================================================

<!DOCTYPE html>

<html>

<head>

<title>HTML Tags

</title>

</head>

<body>

<p> this is a paragraph <strong> this makes text strong</strong></p>

<p> This is a paragraph <em> this makes text em</em></p>

<pre> Creates preformatted text </pre>

<em>Used to define emphasized text</em>

<strong> Define text with strong importance</strong>

<p> Creates a new paragraph</p>

<br>Inserts a line break (carriage return)<br>

<blockquote> Puts content in quote - indents</blockquote>

<div>Used to format block content with CSS </div>

Lists

<ul>Creates an unordered list

<li>Encompasses each list item </li>

</ul>

<ol> Creates an ordered list

<li>First</li>

<li>Second</li>

</ol>

<hr>

Inserts a horizontal rule

</body>

</html>

===================================================

Links

We can link to url's anywhere in the internet

<a href="https://www.google.com/">clickable text goes to google.com</a>

Or we can link to pages directly in our home directory

<a href="simple.html">clickable text goes to url</a>

Can create a link for an email address

<a href="mailto:EMAIL_ADDRESS">john.iacovacci@uconn.edu</a>

Link to different sections of a web page using NAME

Creates a target location within a document

<a href="#NAME">clickable text</a>

Creates a link to that target location

Linking images - you can link to any image on the internet that is public.

Adds image; it is a separate file located at the URL

Use width and height parameters to control the size of the image displayed.

Embed images into our web pages.

Can also upload custom or searched images to buckets.

Google Images

Search for uconn huskies

Right click on the image

Save to download folder as whiite_husky.jpg

Create a folder on the bucket for images

Click into folder

Click UPLOAD FILES

Select white_husky

File will then appear in the bucket directory

For public URL click on file name

HTML Link example

=========================================================

<!DOCTYPE html>

<html>

<head>

<title>Links and images

</title>

</head>

<body>

<br>

<a href="http://cloud.google.com">clickable text goes to url cloud.google.com</a><br>

<br>

<br> email Client<br>

<br>

<a href="mailto:EMAIL_ADDRESS">john.iacovacci@uconn.edu</a><br>

<br>

Creates a hyperlink to an email address<br>

<br>

Or we can link to pages directly in our home directory

<a h ref="https://storage.cloud.google.com/uconnstamford/simple.html">clickable text goes to url</a>

<br>

<br>

Creates a target location within a document<br>

<br>

<a href="#NAME">clickable text</a><br>

Creates a link to that target location

<br>

Linking images - you can link to any image on the internet that is public

<br>

<br>

Adds image; it is a separate file located at the URL<br>

</body>

</html>

=======================================================

Interactive Forms

Forms are used to collect data inputted by a user.

An interface for a web application to send data across the web.

FORM defines the form and within this tag.

An action attribute is used to tell the form where its contents will be sent to.

The method attribute tells the form how the data in it is going to be sent.

Get latches the form information onto a web address.

Post sends the form’s information.

</form>

Action is a program or a gateway

Input tag allows for data to get into the form

<input type="text"> is a standard textbox.

This can also have a value attribute, sets initial text in the textbox.

The characters typed in by the user will be hidden.

Is a checkbox, which can be toggled on and off by the user. This can also have a checked attribute

<input type="checkbox" checked> - The attribute doesn’t make the initial state of the check box to be switched on, as it were.

<input type="radio"> Is similar to a checkbox, but the user can only select one radio button in a group. This can also have a checked attribute.

<input type="submit"> Is a button that will submit the form.

You can control the text that appears on the submit button with the value attribute, for example <input type="submit" value="Click Me Now">.

Textarea - large, multi-line textbox. The anticipated number of rows and columns can be defined with rows and cols attributes

Select - Tag works with the option tag to make drop-down select boxes.

<option>Option 1</option>

<option>Option 2</option>

<option value="third option">Option 3</option>

</select>

When the form is submitted, the value of the selected option will be sent

Names - form fields need names. So to all of the fields, the attribute name needs to be added, for example <input type="text" name="talkingsponge">.

Simple form

Name Form

=======================================================

<!DOCTYPE html>

<html>

<body>

<h2>HTML Name Example</h2>

<p>Student Name : </p>

</form>

</body>

</html>

=====================================================

The following example

HTML Forms Example

=====================================================

<html>

<style>

body {background-color: powderblue;}

h1 {color: blue;}

p {color: black;}

</style>

<h1 style="font-family: Verdana, sans-serif;">Student Profile</h1>

<br>

<p>Student Name : </p>

<p>Major : </p>

<p><textarea name="my-comments" rows="5" cols="20">Your comments</textarea></p>

<p>Graduation Year :</p>

</form>

</html>

=====================================================

UCONN Stamford Google Cloud Development Platform

UCONN

HTML Explained

No comments:

Post a Comment

Disable Billing

Report Abuse