session two
agenda
- web concepts
- tools of the trade
- HTML:
- fundamentals
- block elements
- inline elements
- void elements
- div & span
- exercises
- hyperlink basics
- image basics
- assignment two
- readings & resources
web concepts
- there are many ways that information can be passed between computers:
- all are simply communication standards (software, hardware) which facilitate the exchange of data
- the World Wide Web (www, web) is facilitated by its own set of standards:
- base standard created by Tim Berners-Lee (sometimes called "the father of the WWW"), at CERN, the European Particle Physics Laboratory in 1989
- web servers (see below) use the HTTP (Hypertext Transfer Protocol), which allows the delivery of multimedia content
- more on the world wide web
- concepts we need to understand:
- HTTP - hypertext transfer protocol
- client - request
- server - response
- components we need to understand:
- client software:
- web browsers (Firefox, Chrome, Safari)
- mail clients (Outlook Express, Thunderbird, more info on email clients)
- FTP software (Filezilla, SmartFTP)
- server software: Apache, Microsoft
- web documents: written in HTML (*.html, *.htm, *.shtml)
- web sites: group of related and interlinked Web documents
- client software:
- URLs (uniform resource locator) - the standard way to give the address of Internet resources that are part of the WWW
- protocol (e.g.,
http://) - server name (e.g.,
www.bcitwebdev.com) - path (e.g.,
/lectures/two/) - file (e.g.,
index.shtml) -
http://www.bcitwebdev.com/lectures/two/index.shtml
- protocol (e.g.,
tools of the trade
- HTML editors
- Brackets, Visual Studio, Notepad++, TextWrangler (Mac)
- souped-up text editors
- typically not identified as client software, but may have FTP capabilities built in, which would effectively make it a client
- More options...
- graphics software
- Adobe Photoshop, The GIMP, GIMPshop
- handy for resizing, creating images
- summary of raster graphics programs at Wikipedia
- typically not identified as client software
- FTP utilities
- web browsers
HTML fundamentals
- hypertext markup language
- defines document according to its structure: headings, paragraphs, lists, etc. - structural NOT presentational
- markup is a way of embedding instructions in a document and comes in many flavours: SGML, HTML, XML, XHTML, etc.
- for more on specifications and "dialects" of HTML see www.w3c.org
- basic building blocks of HTML are elements, sometimes referred to as "tags"
-
<tag></tag> - may help to think of tags as containers
-
- structured language: rules for where tags can go
- syntax: avoid "mixing" your tags:
<b><i></b></i> - spacing: browsers ignore extra space - use tabs and extra carriage returns to format your code so that you can understand it
- hierarchy - there are parent/child relationships for tags:
bodyandheadare children ofhtml;inlineelements should always be insideblockelementsblockelements should not typically be nested within otherblockelements, etc.
- case insensitive: this is okay for HTML:
<B><i></I></b>but I recommend using lowercase characters where possible
- syntax: avoid "mixing" your tags:
- many tags have attribute/value pairs:
- syntax:
<tag attribute="value"> - e.g.:
<abbr title="cascading stylesheets">CSS</abbr> - more control is gained by using attributes/values: specifies characteristics of various elements
- some attributes can be used globally (
class,id), while some tags have specific attributes that can be used; attributes have specific types of values that can be used
- syntax:
- all valid HTML documents need to include document tags:
<!doctype html><html></html>- should include language attribute to help screen readers, search engines, spell checkers, etc.:
<html lang="en"><head></head><meta>- several uses, but should at least specify character set:
<meta charset="utf-8"><title></title><body></body>
- use comments to help you keep track of your code:
<!-- this is a comment -->
block elements
- block elements always display their data on its own line - whatever appears before a block element will be above it, whatever appears after will be below.
- may contain other block or inline tags, may contain textual data
- can be resized and repositioned using CSS
- sample block elements:
-
<p></p>- paragraph -
<h1></h1>- heading (numbers 1-6 indicate importance, not size) -
<ul></ul>- unordered list-
<li></li>- list items
-
-
<ol></ol>- ordered list (i.e., automatically provides numbers)-
<li></li>- list items
-
-
<dl></dl>- description list-
<dt></dt>- description term -
<dd></dd>- description data
-
-
inline elements
- inline elements do not make new lines for the data they contain. Data that precedes or follows an inline tag will appear on the same line.
- always display contents within the line it appears
- may only contain other inline tags or textual data
- may NOT contain block tags - occasionally may contain another inline tag
- cannot be resized or repositioned using CSS
- ideally, all inline elements should be deployed as children of a block element
- sample inline elements:
-
<strong></strong>- strong emphasis -
<em></em>- emphasis -
<br>- line break -
<abbr></abbr>- indicates an abbreviation or acronym -
<code></code>- indicates computer code fragment -
<small></small>- renders text in small format
-
void elements
- void elements (or empty elements) cannot have child elements
- does not have an end tag, e.g.,
</p> - can be either a
blockorinlineelement - sample void elements:
-
<br>- line break -
<hr>- thematic break between content -
<meta>- a way to add data about the page to the<head>section of the page -
<link>- specified relationship between document and other resources -
<img>- used to add images to pages
-
div and span
div and span are tagsets which allow you to define your own blocks of code for styling. To add styling, both require either a class or id to be assigned.
div element
- The div element is a non-semantic (meaningless) block element. Used in conjunction with 'id' or 'class', style can be applied to several elements at once.
- div elements were commonly used to define regions of the page, e.g., 'header', 'footer', 'navigation' etc. Style applied to a div affects all code contained within.
- Use div tags for 'arbitrary' application of CSS style to grouped content (e.g., for page layout concerns) and do NOT use them when there are better, meaningful semantic alternatives.
span element
- The span tag is a non-semantic (meaningless) inline element. Like all inline tags it is typically applied to content inside a block element.
- Used in conjunction with 'id' or 'class', style can be applied to any subsection of textual content within an HTML tag, allowing you to highlight text within a tag for example.
- Use span tags for 'arbitrary' application of CSS style to a sub-section of content (e.g., for styling a few words or characters) and do NOT use them when there are better, meaningful semantic alternatives.
so how do we comply with standards?
- only structurally and syntactically valid code can be expected to behave predicatably in the many web browsers available
- errors in your code should be found and fixed before publishing your work online
- use the following validation services to ensure correctly coded documents
- if you cannot make sense of and fix an error, consult your instructor for assistance
exercise: find and correct errors
- Download the session 02 exercise files from the class website in the Learning Hub, and look for the folder called troubleshooting_exercise.
- Open each of the files and see if you can detect errors in the file and correct them.
- Run them through the HTML Validator to check your work.
- Can't see what's wrong? Use the validator to give you a hint...
exercise: markup the widgetwerks pages:
- Open an HTML editor. In class we are using Brackets, but you can use one of the editors linked from the resources page.
- Using today's notes and online resources as a reference, create a new document that includes all the necessary document tags.
- Don't forget to use a
<meta>tag to specify your character encoding (see the page template in lecture one). - Add a
<title>tag that reads something like Welcome to WidgetWerks Inc.. This should be unique for each page you create, but may include similar elements to imply relationships. - Save the file to the widgetwerks folder you downloaded earlier and name it
index.html. - Open up the
home.txtfile that you downloaded from the shared server earlier. Select everything in the document and copy it (Ctrl + C). - Go back to your new document, position your cursor so that it is nested inside your body "container" (
<body></body>) and paste the content fromhome.txt(Ctrl + V). - Use the linebreaks within the copy to guess where you should markup paragraphs and headings.
- Use the other block elements and text formatting tags to markup the rest of the document. Save your work.
- Follow these same steps to create webpages using the content from
partners.txtandstuff.txt, but markup appropriate parts of the conent as lists. Save these files aspartners.htmlandstuff.htmlin your widgetwerks folder.
hyperlink basics
- usage:
<a href="my-page.html">View my webpage</a> - relative link contains an address that is relative to the current domain or file location (
../../images/logo.gif)<a href="index.html">click here for home page</a>(same directory)<a href="../index.html">click here for home page</a>(up one directory)<a href="products/index.html">click here for products page</a>(from curent directory, go to products directory)<a href="/products/index.html">click here for products page</a>(relative to root of site)
- absolute (or fully qualified) link refers to inclusion of protocol, server/host (
http://www.bcitwebdev.com/) - use for links to other websites - in-page anchor - links within documents:
<a href="#link">click here</a>
<section id="link">...to jump to here</section> - email - launches email message window (
<a href="mailto:bcit1850@gmail.com">email me (bcit1850@gmail.com)</a>)
image basics
- usage:
<img src="movie-photo.jpg"> - primary attributes:
- source of image (
src):
e.g.,<img src="movie-photo.jpg"> - alternate display (
alt):
e.g.,<img src="movie-photo.jpg" alt="alien vs. predator"> - dimensions (
width,height) in pixels:
e.g.,<img src="movie-photo.jpg" alt="alien vs. predator" width="600" height="400">
- source of image (
extra practice: add links to the widgetwerks pages:
- On the home page, add text at the end of the Technical Evolution section that says "Learn more about our stuff." and link it to the stuff page.
- Also on the home page, add text at the end of the Friends & Neighbours section that says "Learn more about our partners." and link it to the partners page.
- In the footer of all pages, make the phrase "runwithscissors design" an absolute link to the runwithscissors site.
- Also in the footer on all pages, create a bookmark link from the word "top" that links to the top of the page. Remember: you will need a label to link to (see notes).
- On the stuff page, make the email address that appears near the bottom of the page a clickable link that points to your email address.
- Create a navigation bar horizontally across the top of each page. Separate each element with a pipe (
|) character. Here's an example:Experiment with other formatting or ways to separate the navigation from content (horizontal rules, etc.).
assignment two
objective: Write, test, and publish linked, semantic HTML pages and upload to your bcitwebdev.com account.