Skip to content

HTML

Background

Reference: This page is sourced from https://www.w3schools.com

XML

XML consists of a start-tag such as <start> and an end-tag </start> or can be an empty-element tag such as <nothing />.  You can mark these up with key value encoding, such as <start mykey="val">Just a start</start>.    This format is most often thought of in the context of HTML, so we’ll use that for our purposes here.  HTML follows generally XML.

Example simple HTML:

<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

In practice, many more tags are defined, but we can provide some examples below for a few more common ones

HTML

Basic HTML Page Structure

A basic HTML page is a document that typically has the file extension .html, though HTML frequently appears in the content of other file types as well. All HTML documents follow the same basic structure so that the browser that renders the file knows what to do. The basic structure on which all webpages are built looks like this:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1>Homepage Headline</h1>
        <p>This is a paragraph.</p>
    </body>
</html>

HTML defines the content of every web page on the Internet. By “marking up” your raw content with HTML tags, you’re able to tell web browsers how you want different parts of your content to be displayed. Creating an HTML document with properly marked up content is the first step of developing a web page. Lets consider one element, where an element consists of a starting and ending tag.

HTML Rendering
<h1>My First Heading</h1>
My first paragraph.
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<a href=”https://dtg.usc.edu”>This is a link</a>
Try it Yourself »
<button>My button</button>

THIS IS HEADING 1

This is heading 2

This is heading 3

This is a link
Try it Yourself »

HTML defines the content of every web page on the Internet. By “marking up” your raw content with HTML tags, you’re able to tell web browsers how you want different parts of your content to be displayed. Creating an HTML document with properly marked up content is the first step of developing a web page.
Diagram: raw content turning into HTML markup turning into a web page

Example HTML Page

  • The <!DOCTYPE html> declaration defines that this document is an HTML5 document
  • The <html> element is the root element of an HTML page
  • The <head> element contains meta information about the HTML page
  • The <title> element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab)
  • The <body> element defines the document’s body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
  • The <h1> element defines a large heading
  • The <p> element defines a paragraph

An HTML Element Definition

An HTML element is defined by a start tag, content, and an end tag:

<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag

<h1>This is heading 1</h1>

Above, H1 is an element.  We can mark it up, or add information in a variety of ways.  One impact way is to give a specific tag an id.  We can change it thus:

<h1 id='my_top_heading'>This is heading 1</h1>

Another important way is to give subtypes or classes:

<h1 id='my_top_heading' class="bigbigheaders">This is heading 1</h1>

Classes are often used for stylings, and used to specify groups that should be formatted together that go beyond the primary element types. Styling is done with the “style” tag:

<h1 id='my_top_heading' class="bigbigheaders" style="60px">This is heading 1</h1>

We can do this in css files.

 

Head Element

The HTML head element is a container that can include a number of HTML elements that are not visible parts of the page rendered by the browser. These elements are either metadata that describe information about the page or are helping pull in external resources like CSS stylesheets or JavaScript files.

The <title> element is the only element that is required to be contained within the <head> tags. The content within this element is displayed as the page title in the tab of the browser and is also what search engines use to identify the title of a page.

All of the HTML elements that can be used inside the <head> element are:

<base>
<link>
<meta>
<noscript>
<script>
<style>
<title>

In the body some examples are:

<!DOCTYPE html> <!-- doctype declaration -->
<html> <!-- opening HTML tag -->
    <head> <!-- opening head tag -->
        <title>Page Title</title> <!-- title tag -->
    </head> <!-- closing head tag -->
    <body>  <!-- opening body tag -->
        <h1>Homepage Headline</h1> <!-- h1 headline -->
        <p>This is a paragraph.</p> <!-- paragraph -->
    </body> <!-- closing body tag -->
</html> <!-- closing HTML tag -->

CSS

CSS stands for Cascading Style Sheets. This programming language dictates how the HTML elements of a website should actually appear on the frontend of the page.

HTML can be markedup.  For example, we could change H1 to appear larger or smaller:

<h1 style="font-size:25px">My First Heading</h1>

This would impact that tag.  However what if we wanted to impact all H1?  Styles that impact everything are described by the <style></style> tag.  Alternatively, all of these together can be put into files, called css files.

h1#my_type_heading.bigbigheaders {
  font-size: 2.6em;
  line-height: 1.5em;
  font-family:  "Open Sans", Verdana, Arial, sans-serif;
  font-weight: 300;
  color: #1c1f2a;
  margin-block-start: 1em;
  margin-block-end: 0.5em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;			
}

As you see above, there is a pandora-boxes of ways to control styling.  A few major things to be aware of is that above the . indicates the class and the # indicates the ID.

A few notes above are that colors can be specified a variety of ways (such as a hexadecimal, or CMYK) as can fonts (em, rem, px).

JavaScript

JavaScript is a programming language that lets web developers design interactive sites. These are typically embedded within the <script></script> tags.

There are many libraries, such as Jquery which help you with this, or D3.js which help in graphing.  These are often sourced in the header, to run first, or run at some point sequentially depending on the location of the script tag.

Images

Images can be displayed, and are beyond the scope of this class. One impact factor is that SVG is a special type of vector based image that is described with lines/angles, and can be scalled so as not to appear ever pixilated. Important factors with images are their size and compression, as they impact download time.

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.  It accesses a server typically on port 80 if using the http protocol.  For secure, its typically using port 443 (e.g. https).  These port numbers are typically hidden for http and https, but are actually then either port 80 and port 443.  Other familiar ports are 22 for ssh.

A browser does not display the HTML tags, but uses them to determine how to display the document:

HTML Page Structure

Below is a visualization of an HTML page structure:

<html>
<head>
   <title>Page title</title>
</head>
<body>
   <h1>This is a heading level 1</h1>
</body>
</html>

History

Historical events

Year Version
1989 Tim Berners-Lee ~ www
1991 Tim Berners-Lee ~ HTML
1993 Dave Raggett ~ HTML+
1995 HTML 2.0
2008 WHATWG HTML5 First Public Draft
2014 W3C Recommendation: HTML5
2017 W3C Recommendation: HTML5.2

What are Attributes

Attributes provide additional information about HTML elements.

HTML Attributes

  • All HTML elements can have attributes
  • Attributes provide additional information about elements
  • Attributes are always specified in the start tag
  • Attributes usually come in name/value pairs like: name=”value”

The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

Example

<a href="https://itg.usc.edu">Translational Genomics</a>

The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:

Example

<img src="https://itg.usc.edu/site/wp-content/uploads/2020/01/quad-1000.jpg">

The width and height Attributes

The <img> tag should also contain the width and height attributes, which specifies the width and height of the image (in pixels):

Example

<img src="https://itg.usc.edu/site/wp-content/uploads/2020/01/quad-1000.jpg" width="500" height="600">

The style Attribute

The style attribute is used to add styles to an element, such as color, font, size, and more.

Example

<p style="color:red;">This is a red paragraph.</p>

Single or Double Quotes?

Double quotes around attribute values are the most common in HTML, but single quotes can also be used.

In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:

<p title='quotes-> "ShotGun" <-quotes'>

CSS

Cascading Style Sheets (CSS) is used to format a webpage.CSS stands for Cascading Style Sheets. CSS can control color, font, size, etc.

Using CSS

CSS can be added to HTML documents in 3 ways:

  • Inline – by using the style attribute inside HTML elements
  • Internal – by using a <style> element in the <head> section
  • External – by using a <link> element to link to an external CSS file

Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to red:

Example

<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

Internal CSS

An internal CSS is used to define a style for a single HTML page and is defined in the <head> section of an HTML page, within a <style> element.

The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red. In addition, the page will be displayed with a “powderblue” background color:

Example

<!DOCTYPE html>
<html>
<head>
   <style> 
     body {background-color: powderblue;}
     h1   {color: blue;}
     p    {color: red;}
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

External CSS

An external style sheet is used to define the style for many HTML pages. To use an external style sheet, add a link to it in the <head> section of each HTML page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension. Here is what the “styles.css” file looks like

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

CSS Colors, Fonts and Sizes

The CSS color property defines the text color to be used. The CSS font-family property defines the font to be used. The CSS font-size property defines the text size to be used.

<!DOCTYPE html>
<html>
<head>

<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
<title></title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

CSS Padding

The CSS padding property defines a padding (space) between the text and the border.

Example

Use of CSS border and padding properties:

p {
  border: 2px solid powderblue;
  padding: 30px;
}

CSS Margin

The CSS margin property defines a margin (space) outside the border.

Example

Use of CSS border and margin properties:

p {
  border: 2px solid powderblue;
  margin: 50px;
}

Link to External CSS

External style sheets can be referenced with a full URL or with a path relative to the current web page.

Example

This example uses a full URL to link to a style sheet:

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

HTML Iframe Syntax

The HTML <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Syntax

<iframe src="url" title="description"></iframe>

Using The class Attribute

The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.

Example

<!DOCTYPE html>
<html>
<head>

<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
<title></title>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>

ID Attribute

The HTML id attribute is used to specify a unique id for an HTML element. The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document. The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id. The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}.  In the following example we have an <h1> element that points to the id name “myHeader”. This <h1> element will be styled according to the #myHeader style definition in the head section






							

								

	

	


 













	

		

			
		

			




	

		

							

					University of Southern California