Bit116 scripting lecture 02
Sponsored Links
This presentation is the property of its rightful owner.
1 / 39

BIT116: Scripting Lecture 02 PowerPoint PPT Presentation

  • Uploaded on
  • Presentation posted in: General

BIT116: Scripting Lecture 02. Instructor: Craig Duckett [email protected] Wednesday, January 8 th , 2014. Crash Course in HTML. HTML1 (1993).

Download Presentation

BIT116: Scripting Lecture 02

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript

BIT116: ScriptingLecture 02

Instructor: Craig Duckett

[email protected]

Wednesday, January 8th, 2014

Crash Course in HTML

HTML1 (1993)


HTML2 (1995)


HTML3.2 (1997)


HTML4 (1998)


XHTML1 (2000) eXtensibleHTML


The main difference between XHTML1 and HTML4 is that all tags, once opened, must be closed. There are also some restrictions about what tags can be nested inside each other.

XHTML1.1 (2001)


HTML5 (2008 Working Draft; 2012 - ?)



A statement or declaration which tells the browser what version of HTML our file is using and therefore how the code should be rendered by the browser at view time.

The DOCTYPE has to appear at the very top of the file, even before the opening HTML tag






Universal Character Set

Transitional Format 8-Bit

Meta Tags

<!DOCTYPE HTML"> <!–- case SENSITIVE, and OPTIONAL, but its use is highly recommended -->

<html lang ="en">


<meta charset="utf-8">

<title>A Groovy Page</title>









The Basic HTML Page

The browser uses this information

"behind the scenes"

The browser uses this information

To display page content


<html><head><title>Simplest HTML page</title></head>

<body>Hello Everybody. What's happening?


The Template HTML Page

The browser uses this head information

"behind the scenes"

The browser uses this body information

to display page content

<h1> element displays a header

of a larger font size based

on the default styles of

the browser

<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="author" content="Rex Winkus"> <title>HTML Template</title></head>

<body> <h1>Page Heading</h1> <!-- heading -->

<p>Page Content</p> <!-- paragraph --></body></html>


The Absolute & Relative Linking

Absolute Linking

A link that includes the entire http path


Relative Linking

A link that only includes the file path in relation to the files and folders in your remote directory

Example blue/moon.html

Common Tags

W3Schools: <p> tag

W3Schools: <br> tag

W3Schools: <h1> to <h6> tags

W3Schools: <ol> tag

W3Schools: <ul> tag

Back before HTML5, if you wanted to design a page into sections you had to use the <div> or "division" tag and creating a separate "id" or "class" for each section you wanted (we'll talk about divs, ids, and classes a bit later)

With HTML5, there are several new tags with this section functionality built in by default. You still need to position and format these sections using CSS, but you don't have to create separate or unique "classes" or "ids" anymore to do it.

W3Schools: <header> tag

W3Schools: <nav> tag

W3Schools <footer> tag

W3Schools <article> tag

W3Schools <section> tag

W3Schools <aside> tag

Also: mention <span> here.

W3Schools <div> tag

W3Schools <span> tag

<!DOCTYPE html>

<html lang="en">


<meta charset="UTF-8" />

<title>Putting It All Together</title>



<header><h1>My Page</h1></header>


<a href="index.html">Home</a>




<h2>My Article</h2>

<p>Some Content</p>



<p>More information</p>



<footer><p>&copy; Rex Winkus 2013 <a href="mailto:[email protected]">Email Me</a><p></footer>




  • SRC is required

  • WIDTH, HEIGHT may be in units of pixels or percentage of page or frame

    • WIDTH="357"

    • HEIGHT="50%"

  • Images scale to fit the space allowed

  • ALT tags (for "alternate") is text that gives a name for the image, and will appear in case the image is missing, as a mouseover popup, and in browser text readers for the visually impaired.<imgsrc="dude.jpg" alt="The Dude Abides">


This is "old school" – Now images are aligned now using CSS



<imgsrc="dolphin.jpg" align="left" width="150" height="150" alt="dolphin jump!">

This is a very cute dolphin on the left!<br>

This is a very cute dolphin on the left!<br>

This is a very cute dolphin on the left!<br>

This is a very cute dolphin on the left!<br>

This is a very cute dolphin on the left!<br>

This is a very cute dolphin on the left!<br>

This is a very cute dolphin on the left!<br>

This is a very cute dolphin on the left!<br>

This is a very cute dolphin on the left!<br>

This is a very cute dolphin on the left!<br>

You can see text wrap around it<br>



This is "old school"Now images are aligned using CSS





I have not yet talked about color, tables, forms (including checkboxes, radio buttons, or select elements), or linking files in and out of sub-folders.

I will be bringing these up—as well as a few other HTML features—as the quarter progresses.

The use of color I will introduce with the next lecture when we move into CSS.

Cascading Style Sheets

CSS1 (1996 Draft; 2000 Browser Support)to coincide with HTML4/XHTML1

CSS2 (1998 Draft; 2010 Browser Support)

CSS3 (1999 Draft; 2012 Browser Support)to coincide with HTML5

Lecture 2

Please begin working on the LECTURE 2 In-Class Exercises.

When you have completed your ICE, call the Instructor over to verify your work. If you have questions about your work, please call over the Instructor to clarify.

Once you have completed your ICEs, you are free to go for the day.

If you don't finish your ICEs by the end of class, you will still get full credit for actively doing the work, but it is greatly recommended you finish any outstanding ICEs outside of class.

  • Login