CS 80: Internet Programming
Instructor: Mark Edmonds
<tag> begins the tag</tag> closes the tag<meta> (specifies
document metadata, <img> tag (adds
an image to the page), there are others we will come
across<tag> content
</tag> is an elementhello_world.html<!DOCTYPE html>
<!-- document type declaration. required. must be on first line -->
<!-- starts the html document, the root of the document's structure. required. -->
<html>
<!-- starts the head section of the document, provides info but usually not content. required. -->
<head>
<!-- metadata tag, here we specify the character encoding of the document. required. -->
<meta charset="utf-8">
<!-- specify the title of the document (what is displayed in the browser tab). required. -->
<title>Hello world!</title>
<!-- end of head section. required. -->
</head>
<!-- document body. the content goes here! required. -->
<body>
<!-- simple paragraph (the p-tag) -->
<p>Welcome to HTML5!</p>
<!-- end of body section. required. -->
</body>
<!-- ends the html document. required. -->
</html>
hello_world.html example to
validator<h1> to
<h6>
<h1> is the "most"
importantheadings.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Headings</title>
</head>
<body>
<h1>Level 1 Heading</h1>
<h2>Level 2 heading</h2>
<h3>Level 3 heading</h3>
<h4>Level 4 heading</h4>
<h5>Level 5 heading</h5>
<h6>Level 6 heading</h6>
</body>
</html>
<a> tag with a corresponding attribute
of href
a stands for 'anchor'href stands for 'hypertext
reference'https://, ftp://,
mailto:, file:, etc) or even
javascript!
linking.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Linking</title>
</head>
<body>
<h1>Welcome to CS 80 at SMC</h1>
<p>Hope you enjoy; make sure to <strong>turn in assignments on time</strong></p>
<p><a href="http://www.smc.edu/">SMC</a></p>
<p><a href="http://smconline.org/index.real?action=Login">eCompanion</a></p>
<p><a href="mailto:edmonds_mark@smc.edu">Email me</a></p>
</body>
</html>
<img>
tag<img> tag is one of the tags
without an ending </img>src attribute specifies where the
image is located
alt attribute, it is allows
for two important usages:
alt description to
a visually impaired person.alt can still
describe what the image isalt description should be as
brief as possible while still being descriptive<a>) to create an image that is also
a hyperlinkimages.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Images</title>
</head>
<body>
<h3>Every common image type is supported</h3>
<p><strong>Note: alt is a required attribute</strong></p>
<p>
<!-- relative path -->
<img src="./camel.png" alt="a camel" >
<!-- remote paths -->
<img src="https://cdn.meme.am/instances/500x/37834819.jpg" alt="The woes of programming" >
<img src="http://www.lakeshorebranding.com/wp-content/uploads/2011/12/web-design-chicago-438x275.png" alt="The woes of programming" >
</p>
<h3>We can control the width and height as well</h3>
<img src="https://media.giphy.com/media/eCqFYAVjjDksg/giphy.gif" alt="Hacking in progress" height="200" width="350">
<h2>We can make our images links as well!</h2>
<a href="http://google.com">
<img src="https://cdn.vox-cdn.com/thumbor/YodYS9ma7P_8jcAplZSoIlw4v-c=/0x0:2012x1341/920x613/filters:focal(0x0:2012x1341)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg" alt="The google logo."/>
</a>
</body>
</html>
< and
>&ref;
ref is a reference to the
character you wish to insert< inserts the less-than
symbol (<)char.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Special characters and horizontal rules</title>
</head>
<body>
<p>
<!-- use some special characters -->
We &amp; can < add © symbols ™ whereever … we " want > in — our – docment
</p>
<hr>
<p>
It's best practice to avoid the <hr> tag now because we can do styling with CSS, producing more professional looking and easier to maintain websites
We can also strike through <del>text</del>, subscript <sub>text</sub>, or superscript <sup>text</sup>.
</p>
</body>
</html>
ul tag starts an unordered list
(ul stands for unordered list)li tag
(li stands for list element)ol tag starts an ordered listli
taglists.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lists</title>
</head>
<body>
<h2>We can make unordered and ordered lists!</h2>
<p>
This is an unordered list
</p>
<ul>
<li>this item has no order</li>
<li>neither does this one</li>
<li>this is not an exciting list</li>
</ul>
<p>
This is an ordered list with reasons why this course is good
</p>
<ol>
<li>Computer science is a great field</li>
<li>The course is fun!</li>
<li>The tests are take home</li>
</ol>
<p>
We can nest lists too
</p>
<ol>
<li>Computer science is a great field
<ul>
<li>It's fun</li>
<li>There are a lot of jobs</li>
<li>It makes you think</li>
</ul>
</li>
<li>The course is fun!
<ol>
<li>You get to explore an entire subfield in one semester
<ul>
<li>Can be the starting point for a career</li>
</ul>
</li>
</ol>
</li>
<li>The tests are take home
<ul>
<li>
A nest
<ul>
<li>
Another nest
<ul>
<li>Nests on nests</li>
</ul>
</li>
</ul>
</li>
</ul>
</ol>
</body>
</html>
<br> tag - a line breaktable tagcaption tag gives the table a
title and summarizes the table's contentTable Bodies, Headers, and Footers
<thead> and
<tfoot> specify the header and
footer of the table, respectively
Table Bodies, Headers, and Footers
<tbody> specifies the main body
portion of the table<thead> and
<tfoot> have the same internal
structureTable Rows
<tbody>, <thead>,
and <tfoot> is comprised of at least
one <tr> element, which is a table
row
Table Rows
<tr> tag is comprised of
<th> tags, which is a header
cell. It is different from the normal cell!
<tr> and
<th> pattern for each row, and each
column you want to specify<tfoot> can be below or aboveTable Rows
<tbody> follows the same
convention, but uses a <td> element
instead of <th>td stands for 'table data'Table Sizing
rowspan and colspanTable Sizing
rowspan allows a single table cell to
span the width of more than one cell or rowcolspan allows a single table cell to
span the width of more than one cell or column<th> and <td>
elementstables.html<!DOCTYPE html>
<html>
<!-- Fig. 2.12: table1.html -->
<!-- Creating a basic table. -->
<head>
<meta charset="utf-8">
<title>Tables</title>
</head>
<body>
<h2>Here's a simple table example</h2>
<h3>Notice the table scales to the widest cell's content (and not the caption's)</h3>
<!-- the <table> tag opens a table -->
<!-- Reminder: the border element should not be used. We are using it here before we learn CSS -->
<table border="1">
<!-- the <caption> tag summarizes the table's -->
<!-- contents (this helps visually impaired people) -->
<caption><strong>Table of Fruits (1st column) and Their Prices (2nd column)</strong></caption>
<!-- the <thead> section appears first in the table -->
<!-- it formats the table header area -->
<thead>
<tr>
<!-- <tr> inserts a table row -->
<th>Fruit</th>
<!-- insert a heading cell -->
<th>Price</th>
</tr>
</thead>
<!-- the <tfoot> section appears last in the table -->
<!-- it formats the table footer -->
<tfoot>
<tr>
<th>Total</th>
<th>$3.75</th>
</tr>
</tfoot>
<!-- within the <tbody> -->
<tbody>
<tr>
<td>Apple</td>
<!-- insert a data cell -->
<td>$0.25</td>
</tr>
<tr>
<td>Orange</td>
<td>$0.50</td>
</tr>
<tr>
<td>Banana</td>
<td>$1.00</td>
</tr>
<tr>
<td>Pineapple</td>
<td>$2.00</td>
</tr>
</tbody>
</table>
<!-- <br> is a line break -->
<br>
<h2>We can make more complicated tables using rowspan and colspan</h2>
<!-- Reminder: the border element should not be used. We are using it here before we learn CSS -->
<table border="1">
<caption>A more complex sample table</caption>
<thead>
<!-- rowspans and colspans merge the specified -->
<!-- number of cells vertically or horizontally -->
<tr>
<!-- merge two rows -->
<th rowspan="2">
<img src="camel.png" width="205" height="167" alt="Picture of a camel">
</th>
<!-- merge four columns -->
<th colspan="4">
<strong>Camelid comparison</strong><br> Approximate as of 10/2011
</th>
</tr>
<tr>
<th># of humps</th>
<th>Indigenous region</th>
<th>Spits?</th>
<th>Produces wool?</th>
</tr>
</thead>
<tbody>
<tr>
<td>Camels (bactrian)</td>
<td>2</td>
<td>Africa/Asia</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<th>Llamas</th>
<td>1</td>
<td>Andes Mountains</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</body>
</html>
<form> tagImportant <form> attributes
method attribute can be two values:
getpostImportant <form> attributes
get
Important <form> attributes
post
Important <form> attributes
action
Inputs
<input>
tagImportant <input> attributes
type
text,
button, color,
password, radio,
range, reset,
submit, etc. with more available
onlineImportant <input> attributes
type
hidden is a special type
Important <input> attributes
type
text has a couple of special
attributes: size - specifies the size of
the text box and maxlength which
specifies the maximum length of the inputImportant <input> attributes
name
Important <input> attributes
value
textarea - multiline text input, has
rows and cols attributespassword - provides a
password-protected field. this is only visually
enforced (displays a * instead of the text), the
password still should be encrypted when sent over
HTTPcolor - allows color inputnumber - allows user to input a
number, similar to a text but for numbersrange - allows user to pick between
a range of valuescheckbox - allows user to tick
multiple optionsradio - allows user to pick one
option from a list<select> tag presents a dropdown
menu with a preselected list of optionsforms.html<!DOCTYPE html>
<html>
<!-- Fig. 2.14: form.html -->
<!-- Form with a text field and hidden fields. -->
<head>
<meta charset="utf-8">
<title>Feedback Form</title>
</head>
<body>
<h1>Feedback Form</h1>
<p>Please fill out this form to help us improve our site.</p>
<!-- this tag starts the the form, gives the -->
<!-- method of sending information and the -->
<!-- location of the form-processing script -->
<form method="post" action="http://www.deitel.com">
<!-- hidden inputs contain non-visual -->
<!-- information that will also be submitted -->
<input type="hidden" name="recipient" value="deitel@deitel.com">
<input type="hidden" name="subject" value="Feedback Form">
<input type="hidden" name="redirect" value="main.html">
<!-- <input type = "text"> inserts a text field -->
<p>
<label>Name:
<input name = "name" type = "text" size = "25" maxlength = "30">
</label>
</p>
<p>
<label>Comments:<br>
<textarea name = "comments" rows = "4" cols = "36">Enter comments here.</textarea>
</label>
</p>
<p>
<!-- input types "submit" and "reset" insert -->
<!-- buttons for submitting and clearing the -->
<!-- form's contents, respectively -->
<input type="submit" value="Submit">
<input type="reset" value="Clear">
</p>
</form>
</body>
</html>
id attribute, then we refer to the
corresponding id in an anchor (a link, the a
tag)internal_linking.html<!DOCTYPE html>
<html>
<!-- Fig. 2.16: internal.html -->
<!-- Internal Linking -->
<head>
<meta charset="utf-8">
<title>Internal Linking</title>
</head>
<body>
<!-- id attribute creates an internal hyperlink destination -->
<h1 id="features">The Best Features of the Internet</h1>
<!-- an internal link's address is "#id" -->
<p><a href="#bugs">Go to <em>Favorite Bugs</em></a></p>
<ul>
<li>You can meet people from countries around the world.</li>
<li>You have access to new media as it becomes public:
<ul>
<li>New games</li>
<li>New applications
<ul>
<li>For Business</li>
<li>For Pleasure</li>
</ul>
</li>
<li>Around the clock news</li>
<li>Search Engines</li>
<li>Shopping</li>
<li>Programming
<ul>
<li>HTML5</li>
<li>Java</li>
<li>Dynamic HTML</li>
<li>Scripts</li>
<li>New languages</li>
</ul>
</li>
</ul>
</li>
<li>Links</li>
<li>Keeping in touch with old friends</li>
<li>It is the technology of the future!</li>
</ul>
<br><br><br><br><p>Skipping a whole bunch of space where you would put amazing web content</p><br><br><br><br>
<p>Skipping a whole bunch of space where you would put amazing web content</p><br><br><br><br>
<p>Skipping a whole bunch of space where you would put amazing web content</p><br><br><br><br>
<p>Skipping a whole bunch of space where you would put amazing web content</p><br><br><br><br>
<p>Skipping a whole bunch of space where you would put amazing web content</p><br><br><br><br>
<!-- id attribute creates an internal hyperlink destination -->
<h1 id="bugs">My 3 Favorite Bugs</h1>
<p>
<!-- internal hyperlink to features -->
<a href="#features">Go to <em>Favorite Features</em></a>
</p>
<ol>
<li>Fire Fly</li>
<li>Gal Ant</li>
<li>Roman Tic</li>
</ol>
<h1>We can even reference an id in a different HTML document on a different host</h1>
<p>
<a href="https://en.wikipedia.org/wiki/HTML#Attributes">https://en.wikipedia.org/wiki/HTML#Attributes</a>
</p>
<p>
<a href="#">Top</a>
</p>
</body>
</html>