|
Date
|
Online
Reading / Videos
|
In Class Exercises / Projects
|
|
|
|
PROJECTS
are to be completed and DUE by the due date.
|
|
Aug 15
|
Overview, Expectations, HTML Basics
LESSON
OBJECTIVES
- Student
Learning Outcomes (SLO) - Course Introduction
- HTML1:
Go to w3schools.com - The World's Largest Web Developer Site
- Click
on HTML Introduction
- Click
on HTML Editor - USE Notepad
-
Click on HTML Basics
- Click
on HTML Headings
- Click
on HTML Paragraphs
|
IN-CLASS
Exercise (To Be Graded In Class):
- Create your
Folder on the Desktop.
- Create
a CS211 Folder in Google Drive, SHARE the folder with me (yvonne.flores@guamcc.edu)
- Create
a HTML template web page with the necessary HTML tags:
- Save
As: template.html
- Save
as type: All Files
- Encoding:
UTF-8
- HTML1:
- Open
template.html, Save As: html1.html
- HTML
Home, Introduction, Editor, Basics, Heading, Paragraph
- GCC's
Mission Statement
- Open template.html, Save As: mission.html.
Create a HTML web page that will display:
-
GCC's Mission Statement as the title of the web page, the GCC Mission
Statement as a heading and the multi-line mission statement below
it.
- Internet
Service Providers - Open template.html,
Save As: isps.html. Create a HTML
web page that will display:
-
Customer Service Information for 3 Internet Service Providers on Guam
- Include
a web page title, headings and customer information for the 3 ISPs.
- DRAG
template.html, html1.html, mission.html, isps.html to your Shared CS211
folder.
- Check
Your Email after today's class.
|
|
HTML Basics
| Opening Tag |
Closing Tag |
| <!DOCTYPE
html> |
|
<html>
|
</html>
|
|
<head>
|
</head>
|
|
<title>
|
</title>
|
|
<body>
|
</body>
|
|
<h1><h2><h3><h4><h5><h6>
|
</h1></h2></h3></h4></h5></h6>
|
|
<hr>
|
no
closing tag
|
|
<p>
|
</p>
|
|
<br>
|
no
closing tag
|
|
<pre>
|
</pre>
|
|
| Aug
20 |
LESSON
OBJECTIVES
- HTML2:
Go to w3schools.com
- Link
<a> Syntax
- href
Attribute
- target
Attribute
- title
Attribute
- Click
on HTML Images
- Image
<img> Syntax
- src
Attribute
- alt
Attribute
- width
Attribute
- height
Attribute
- style
Attribute
- Click
on HTML Lists
- Unordered
Lists <ul> Syntax and Ordered Lists <ol> Syntax
- List
Item <li> Syntax
- styleAttribute
- type
Attribute
- Description
Lists <dl> Syntax
- Description
List Term <dt> Syntax
- Description
List Definition <dd> Syntax
- For
HTML Recap - Go to w3schools.com HTML Tutorial
- Scroll
to the bottom Click on HTML Examples
|
IN-CLASS
Exercise (To Be Graded In Class):
- Create your
Folder on the Desktop.
- Open
Notepad, create a web page with the necessary HTML tags.
- Save
As: html2.html
- Save
as type: All Files
- Encoding:
UTF-8
- For
the following Exercise
- Heading
between each section.
- Horizontal
Rule between each section
- 3
Working Links that open to a new page.
- Unordered
List of Taco Bell locations.
- Ordered
List of your Favorite Restaurants
- 3
Images
- Definition
List with at least 3 computer terms.
- DRAG
html2.html to your Shared CS211 folder.
|
|
HTML Basics (continued)
| Opening Tag |
Closing Tag |
|
<a>
|
</a>
|
|
<img>
|
no
closing tag
|
|
<ul>
|
</ul>
|
|
<ol>
|
</ol>
|
|
<li>
|
</li>
|
| <dl> |
</dl> |
| <dt> |
</dt> |
| <dd> |
</dd> |
|
|
|
HTML Attributes - name="value"
pairs
| Attribute |
name="value"
pairs
|
|
href
|
<a href="https://www.w3schools.com">This
is a link</a> |
|
target
|
<a href="https://www.w3schools.com/"
target="_blank">Visit W3Schools!</a> |
|
src
alt
width
height
|
<img src="w3schools.jpg"
alt="W3Schools.com" width="104" height="142"> |
|
style
|
<ul style="list-style-type:circle"> |
|
type
|
<ol type="a">
<ol type="I">
|
|
|
<ol type="i"> |
|
start
|
<ol start="50"> |
|
| Aug
22 |
LESSON
OBJECTIVES
- HTML3:
Go to w3schools.com
- Click
on HTML Attributes
- Click
on HTML Styles
- Click
on HTML Formatting
- Click
on HTML Quotations
- Click
on HTML Comments
|
HTML
Project 1 - Letter (To Be Graded In Class)
- Download
File: Click Here to Link to Google Drive for letter.txt file
- You
must log in using your guamcc email address.
-
Download to your folder.
- OPEN
the file in NOTEPAD, SAVE AS:
- letterfinal.html
- Save
as type: All files
- Encoding:
UTF-8
- Click
Here to view the Project Briefs.
- MARKUP
the file using the <HTML> tags and attributes you have learn
so far.
- Make
sure your are SAVING your file periodically.
- Click
Here to view the OUTPUT
- DRAG
letterfinal.html to your Shared CS211 folder.
|
|
HTML Attributes - comes in name="value"
pairs
| Attribute |
name="value"
pairs
|
|
style
|
<p style="color:red">I
am a paragraph</p> |
| <body style="background-color:powderblue;"> |
| <h1 style="font-family:verdana;">This
is a heading</h1> |
|
<h1 style="text-align:center;">Centered
Heading</h1>
<p style="text-align:center;">Centered
paragraph.</p>
|
| <p style="font-size:160%;">This
is a paragraph.</p> |
|
HTML
Formatting
| Opening Tag |
Closing Tag |
|
<b>
|
</b>
|
|
<strong>
|
</strong> |
|
<i>
|
</i> |
|
<em>
|
</em> |
|
<mark>
|
</mark> |
|
<small>
|
</small> |
| <del> |
</del> |
| <sub> |
</sub> |
| <sup> |
</sup> |
|
|
HTML Quotations
| Opening Tag |
Closing Tag |
|
<q>
|
</q>
|
|
<blockquote>
|
</blockquote> |
| <abbr> |
</abbr> |
| <address> |
</address> |
| <cite> |
</cite> |
| <bdo> |
</bdo> |
|
| Aug
27 |
LESSON
OBJECTIVES
- HTML4:
Go to w3schools.com
- Click
on HTML Blocks
- Click
on HTML Tables
|
IN-CLASS
Exercise (To Be Graded In Class):
- Click
on Link for Instructions: <div>, <span>
- Click
on Link for Instructions: <table>
- DRAG
div/table.html file to your Shared CS211 folder.
|
|
HTML Blocks
| Opening Tag |
Closing Tag |
|
<div>
|
</div>
|
| <span> |
</span> |
|
|
HTML Tables
| Opening Tag |
Closing Tag |
|
<table>
|
</table>
|
| <tr> |
</tr> |
| <th> |
</th> |
| <td> |
</td> |
|
| Aug
29 |
LESSON
OBJECTIVES
- HTML5:
Go to w3schools.com
- Click
on HTML Forms
- Click
on HTML Form Elements
- Click
on HTML Input Types
- Click
on HTML Input Attributes
|
IN-CLASS
Exercise (To Be Graded In Class):
- Click
on Link for Instructions: <form>
- DRAG
form.html file to your Shared CS211 folder.
|
|
HTML Form
| Opening Tag |
Closing Tag |
|
<form>
|
</form>
|
| <input> |
no
closing tag |
| <textarea> |
</textarea> |
| <label> |
</label> |
| <fieldset> |
</fieldset> |
| <legend> |
</legend> |
| <select> |
</select> |
| <optgroup> |
<optgroup> |
| <option> |
</option> |
| <button> |
|
|
