Week 14 – HTML advanced 2 & Final project

Lesson Overview

Topic: Advanced HTML

Activities & Due Dates: [Final Project] Developing your website

---

Opening – How to insert multiple pages on a page?

•Use the frame in HTML

•A web page can be made up of multiple HTML pages.

•Each page is filled with an HTML document.

•E.g.) make a frame page that divides into two pages: header and content

Activity 1 – Frames with vertical pages

Activity 2 –Frames without borders and names

Activity 3 -Targets

•When you use links for use in a frames environment, specify an additional attribute called TARGET.

•The TARGET attribute uses the NAME attribute of the FRAME element.

•If we were to place a link in doc1.html that linked to doc3.html and we wanted doc3.html to be displayed in the right windowpane; the HTML code would appear in doc1.html as follows:

•<A HREF=“another.html” TARGET=“content”>Link to another page</A>

• Targets attributions

1.TARGET=“_top” : This loads the linked document into the full browser window with the URL specified by the HREF attribute.

2.TARGET=“_blank” : Opens an unnamed new browser window and loads the document specified in the URL attribute into the new window (and your old window stays open). The back is turned off. Other windows remains on. •

3.  TARGET=“_self” : Loads the document in the same window where the anchor was {Clicked}. This is the default setting for linking elements. •

4.  TARGET=“_parent” : the _parent frame is a prior frameset that the current frameset was “spawned” from. If there isn’t one it is the browser window.

Activity 4 –Frames with links

Activity 5 -Tables

•The <TABLE></TABLE> element has four sub-elements:

•Table Row<TR></TR>.

•Table Header <TH></TH>.

•Table Data <TD></TD>.

•Caption <CAPTION></CAPTION>.

•The table row elements usually contain table header elements or table data elements.

Table Example

Activity 6 -Table with colspan

Appendix A. The HTML version updates

Year	Version
1989	Tim Berners-Lee invented www
1991	Tim Berners-Lee invented HTML
1993	Dave Raggett drafted HTML+
1995	HTML Working Group defined HTML 2.0
1997	W3C Recommendation: HTML 3.2
1999	W3C Recommendation: HTML 4.01
2000	W3C Recommendation: XHTML 1.0
2008	WHATWG HTML5 First Public Draft
2012	WHATWG HTML5 Living Standard
2014	W3C Recommendation: HTML5
2016	W3C Candidate Recommendation: HTML 5.1
2017	W3C Recommendation: HTML5.1 2nd Edition
2017	W3C Recommendation: HTML5.2

Appendix B. HTML5 New Tags

<article>	Defines an article in a document
<aside>	Defines content aside from the page content
<bdi>	Isolates a part of text that might be formatted in a different direction from other text outside it
<details>	Defines additional details that the user can view or hide
<dialog>	Defines a dialog box or window
<figcaption>	Defines a caption for a <figure> element
<figure>	Defines self-contained content
<footer>	Defines a footer for a document or section
<header>	Defines a header for a document or section
<main>	Defines the main content of a document
<mark>	Defines marked/highlighted text
<meter>	Defines a scalar measurement within a known range (a gauge)
<nav>	Defines navigation links

<progress>	Represents the progress of a task
<rp>	Defines what to show in browsers that do not support ruby annotations
<rt>	Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby>	Defines a ruby annotation (for East Asian typography)
<section>	Defines a section in a document
<summary>	Defines a visible heading for a <details> element
<time>	Defines a date/time
<wbr>	Defines a possible line-break

Appendix C. Bluefish – HTML Editor on Raspberry Pi

•Bluefish is a GUI-based web editor

•Install: $ sudo apt-get install bluefish

•Run: $ sudo bluefish

Final Task: Create your website

• Design criteria
  • Must contain your name
  • Must include a picture of yourself
  • Four sections that describe something about you (hobbies, family, movies …)
  • Include a navigation bar on the top or left
  • The navigation tab needs to include a link to your resume (if not ready, this is a good time to create your short resume)
  • All opening HTML tags must be accompanied by appropriate close tags
  • User friendly-design – looks good (tip: observe well-designed websites)
• Submission
  • Compress all HTML files to a zip file using your name
  • $ zip -r yourname.zip *