Intro to Programming Database Internet of Things IT Project Management Networking Web Development Security For Research Students

Introduction

This portion of the website focuses on basic HTML and CSS. The current contents are:

Any questions or comments should be directed to: The creator's email

Standard HTML Structure

The standard format of an HTML file looks like:

<!doctype html>
<HTML>
  <HEAD>
  </HEAD>
  <BODY>
  </BODY>
</HTML>

Any questions or comments should be directed to: The creator's email

Creating Paragraphs

Paragraphs are placed in the p tag:

For more information on paragraphs, go here.

Any questions or comments should be directed to: The creator's email

Creating Hierarchical Sections

A hierarchical section is a way to segment a document into orderly chunks. In normal writing, we think of these as chapters, sections, subsections, etc.

This is how you create hierarchical sections:

For more information on hierarchical sections, go here.

Any questions or comments should be directed to: The creator's email

Aligning Text

To center text, inside an HTML tag, you put the argument style="text-align: center" To right align text, inside an HTML tag, you put the argument style="text-align: right"

This is how you create hierarchical sections:

For more information on text alignment, go here.

Any questions or comments should be directed to: The creator's email

Text and Background Color

Use style="color: <color>" to change text color.

Use style="background-color: <color>" to change the background color of text.

For more information on text color, go here.

For more information on background color, go here.

Any questions or comments should be directed to: The creator's email

Making Text Bold

In modern web development, you are supposed to make text bold using a CSS style.

In the original specification, there was a specific tag for bold.

There is still a tag for strong emphasis, that does the same thing.

For more information on CSS Bold Styling, go here.

For more information on the deprecated b and not deprecated strong tags, go here and here.

Any questions or comments should be directed to: The creator's email

Making Text Italic

In modern web development, you are supposed to make text italic using a CSS style.

In the original specification, there was a specific tag for italics.

There is still a tag for weak emphasis, that does the same thing.

For more information on CSS Italics Styling, go here.

For more information on the deprecated i and not deprecated em tags, go here and here.

Any questions or comments should be directed to: The creator's email

Changing Font Size

In modern web development, you are supposed to change font size using a CSS style. You can either use a descriptor to indicate the size of the text you want. Common descriptors include xx-small, x-small, small, medium, large, x-large, and xx-large.

You can also adjust the size of the text by specifying a font size in pixels.

For more information on font sizes, go here.

Any questions or comments should be directed to: The creator's email

Multiple Styling Commands

If you wish to do multiple stylings on a piece of text, separate the CSS commands with a semicolon.

Any questions or comments should be directed to: The creator's email

HTML Tags That Do Nothing

Div and span are HTML tags that do nothing on their own. They are typically used as placeholders to embed Javascript or CSS style commands. This webpage, for example, has three main divs, a top menu, a sidebar and a main section. Each div is then given a specific style.

As a further example, we are using div and span to align some text in particular ways below.

Div is discussed here.

Span is discussed here.

Any questions or comments should be directed to: The creator's email

Unordered Lists

To create an unordered (bulleted) list, you wrap the thing you want to make into a list with the <ul> tag. Each bullet is then denoted with <li>. To change the style of the bullet, use the list-style-type CSS style.

Unordered lists are discussed here.

Any questions or comments should be directed to: The creator's email

Ordered Lists

To create an ordered (numbered/alphabetical) list, you wrap the thing you want to make into a list with the <ol> tag. Each bullet is then denoted with <li>.

To change the style of the bullet, use the list-style-type CSS style in the ol tag.

Ordered lists are discussed here.

Any questions or comments should be directed to: The creator's email

Images

To include an image, the image must be in a place that can be linked to. You then link to the image with the img tag.

Images are discussed here.

Any questions or comments should be directed to: The creator's email

Sound

To add audio to a web page, you use the audio tag with a source tag inside denoting the audio file. The source tag has to define the type of audio file with the type argument. If the audio is to be played by the user, you put a controls argument in the audio tag.

The example here uses Code Monkey by Jonathan Coulton. This is an example of open source music.

Audio is discussed here.

Any questions or comments should be directed to: The creator's email

Video

To add video to a web page, you use the video tag with a source tag inside denoting the video file. The source tag has to define the type of audio file with the type argument. If the video is to be played by the user, you put a controls argument in the audio tag. You use the width and height arguments to size the video on the screen.

The example here uses a trailer for the movie Attack of the Killer Tomatoes . The trailer is available for free from the US archives. Everyone of a particular generation will know this movie because when you bought a VHS (an ancestor to the DVD) it came bundled with it.

Video is discussed here.

Any questions or comments should be directed to: The creator's email

Hyperlinks

A hyperlink is created using the <a> tag. The href argument is used to point to the link.

Linking To An External Website

To link to an external website, use the complete URL, including the protocol.

Linking Within A Website

To link to an internal webpage, refer to the webpage as a file relative to the current webpage.

Linking To Part Of A Webpage

To link to part of the page, tag that part of the page with an id, and preface the id with "#" in the href.

Opening Link In Another Window

This works exactly like the other hyperlink commands above. However, you just add the argument target="_blank"

Creating a Mail Link

Use mailto: as the protocol instead of http:

Concluding Comments

Hyperlinks are discussed here.

Any questions or comments should be directed to: The creator's email

Page Styling

To set style formats for a whole page, put style information in <style> tags in the <head> tag. You set the style for any HTML tag by specifying the tag name and then the style information.

You can also set styles for specific classes and IDs. You specify a class with a dot in front of the class name, and an ID with a hash in front of the ID name.

In the example below, the whole page (denoted by the body tag) has been set to a black background with cursive script. The page has been defined as two boxes (classes leftpage and rightpage) defined with widths of 400 pixels. The class regular creates white text, while the class titling creates yellow text.

Information on the style tag can be found here and here

Fixed vs Absolute Position

In styling, position: fixed means the object never scrolls off the screen. Position: absolute means the object does scroll off the screen.

Information on the position css property can be found here.

Styling hyperlinks

Hyperlinks must be styled in the style tag. There are four parts to a hyperlink style:

Information on the position css property can be found here.

Borders

To add borders to an object, use the borders style property.

Borders are discussed here.

Any questions or comments should be directed to: The creator's email

Stylesheets

You can create a stylesheet, an independent CSS file applied to a number of your webpages. To do this, take the material you would normally put in a style tag and put it in a separate file with an extension .css. Then, in the head of the html file, type <link href="<your stylesheet name>.css" rel="stylesheet" type="text/css" />

Stylesheets are discussed here.

Any questions or comments should be directed to: The creator's email

Simple Tables

Tables are created by nesting three commands:

  1. You create a table with the <table> tag.
  2. You put a <tr> tag inside the table for every row you want.
  3. You put a <td> tag inside every tr tag for every cell in the row you want.

You can replace the td tag with a <th> tag to denote a header cell. Header cells are typically formatted differently from regular table cells.

Images are discussed here.

Any questions or comments should be directed to: The creator's email

Tables With Spanning Rows and Columns

Sometimes you want columns or rows in your table that crosses to where other columns or rows should be. Use the colspan and rowspan argument in td to render those cells appropriately.

Any questions or comments should be directed to: The creator's email

Table Structure Tags

Many tables are structured into a header, body and footer. You can mark those sections with the <thead>, <tbody> and <tfoot> tags. Marking the table structure like that is often valuable for styling and programming reasons.

The below example marks the header, body and footer so different buttons can be used to modify them.

Any questions or comments should be directed to: The creator's email

Line Breaks and Horizontal Rules

To force a line break, use the <br /> tag.

To make a line stretching across the page, use the <hr /> tag.

Any questions or comments should be directed to: The creator's email

Special Characters

Certain characters cannot be printed directly in HTML, but must be represented by special codes. These include:

Any questions or comments should be directed to: The creator's email

Making Text Underlined

In modern thinking, underlining is generally to be avoided. Nevertheless, to make text underlined, use the text-decoration: underline style command..

For more information on CSS underlining, go here.

Any questions or comments should be directed to: The creator's email

Consuming the width of the screen

To make something take up the whole width or height of the screen, use width: 100vw or height: 100vh. vw and vh are the view width and view height of the screen.

Any questions or comments should be directed to: The creator's email

Stretching one of several objects

Create a div around the objects. Set the display style of the outer div to flex. Then, set the flex-grow property of the object to stretch to a positive number.

Any questions or comments should be directed to: The creator's email