Web Page: 00-03

A table is added to a website using the __________ tag at the beginning and __________ tag at the end.

- <table>, </table>

Sometimes you may need to display information across *several columns*. To do so, you would use the _______________ attribute and indicate the number of columns within the table cell tag.

- <colspan = "">

Sometimes you may need to display information across *several rows*. To do so, you would use the _____________ attribute and indicate the number of rows within the table cell tag.

- <rowspan = "">

Within each row are individual *data* cells, the contents of which are surrounded by ___________ at the beginning and ____________ at the end.

- <td>, </td>

A table *heading* can be added to a column or a row using the ______________ tags that automatically bold and center the contents.

- <th></th>

HTML tables are created row by row. Each row starts with ________ and ends with ___________.

- <tr>, </tr>

When formatting tables with CSS, HTML provides the following structural tags: a. ____________ and ___________ defines a heading section b. ____________ and ____________ defines the body section (most of the table) c. ____________ and ____________ defines the last line(s) of a table

- a. <thead></thead> - b. <tbody></tbody> - c. <tfoot></tfoot>

The ____________ selector can be used on more than one element, while the ____________ selector can be used on only one element.

- class ; ID

A table is a way to represent information such as __________, ___________, ____________, and ___________ in a grid format.

- financial reports, schedules, sports reports, statistics

Tables are made up of ____________ and ____________, which create blocks called ___________.

- rows, columns - cells

Order of selectors matters. List the selectors in order of *most broadly applicable* to a web page most specifically applicable to a web page: _______________, ______________, ______________, _____________

- universal, type, class, ID

Websites

- *HTML* = HyperText Markup Language - *CSS* = Cascading Style Sheets - When a browser gets a web site, it receives the HTML and CSS from the web server that hosts the sites - the web server hosting the site can be from anywhere in the world - *URL (Uniform Resource Locator)* = is used to specify where the web page is hosted - The browser interprets the HTML and CSS code and renders the site to the clients screen/ displays it

The Components of a Web Application

- *Internet* = cloud • laptops = computer client - *Client or Hardware* = the physical electronic (phone, web server, tablet, etc.) - *Browser* = website/software you use to search stuff • ex: Chrome - *Web Server* = another computer that is ATTACHED to the internet all the time that is rarely turned off • this holds the web servers

The Architecture of the Internet

- *LAN (Local Area Network)* • through a wire or wifi • connect when you are close or near the building carrying the wifi (small networks, close in proximity) - *WAN (Wide Area Network)* • larger network usually owned by an ISP • can reach over larger/longer distances - *ISP (Internet Service Provider)* • owns the WAN • Padua: connects through Xfinity/Comcast - *IXP (Internet Exchange Points)* • big router that sends you to the right WAN • it knows where to send you to get to the right web page

Four Types of Selectors

- *Universal Selector*: applies to *ALL* elements on the page • * { margin: 2px 5ps; } - *Type Selector*: applies to only the element *specified* • h1 { font-family: Arial, sans-serif; } • p { margin-left: 3px; } - *Class Selector*: applies to any element that are the *specified class* • .blue { color: blue; } • .right { text-align: right; } ↳ there is a dot (.) before the first name - *ID Selector*: applies only to the *one element* that has the specified ID • #introduction { border: 2px solid black; }

Bold, Italic, Subscript and Superscript

- *inline elements* = does not start a new line • <b> </b> = bold • <i> </i> = italic •  = superscript •  = subscript • <u> = underline • <q> = quote

The (Brief) History

- 1980s: Bill Atkinson at Apple came up with an application called *Hypercard* for the Macintosh - 1989: Sir Tim Berners-Lee invents the World Wide Web and uses HyperText • he worked at CERN • wanted to link research documents together instead of having individuals download them to individual computers - 1990: The first prototype Web Browser on the NeXT computer (again this was Sir Tim B-L) - 1991: Tim shared his ideas through the WWW-talk mailing lists - 1992: Others including NASA get involved - 1994: The first WWW conference is held in Geneva • HTML+ is introduced • HTML2 is developed • The W3 Consortium is formed - 1995: HTML3 is published • tables are introduced • CSS is beginning • International standards are taking shape - 1996: scripting is introduced (JavaScript) - 1997: HTML3.2 becomes a cross-industry and international standard; Development of HTML4 begins (and things get more complicated) - 1998: HTML4 is introduced (and things stay this way for a while) - 2014: HTML5 becomes the standard

The title of a website should include 1 or 2 keywords and be less than ___________ characters long.

- 65

DOCTYPE and Comments

- <!DOCTYPE html> • tells the browser that it is a page made with HTML5 • it should always be on the first line of every HTML file we create - <!--Comment Text Here --> • these special tags denote comment • they are ignored by the browser (are not displayed)

Important For Grades

- <!DOCTYPE html> = tells the browser page was written using HTML5; *must be the first line of every HTML file* - comments = ignored by browser, information for the person reading the code • <!-- comment text in here --> - whitespace = ignored by browser, but makes the code easier to read if there are blank lines and indentation - tags that format • <b>, <i>, <br/>, <hr/>, <u>, <sup>, <sub>

Other Attributes

- <abbr> = used to specify the full term - <acronym> = used to explain the acronym - <cite> = can be used to cite a reference - <dfn> = used to specify something being defined - <address> = used to contain contact details - <del> = works like strikethrough - <s> = also works like strikethrough - <ins> = works like underline

Write the line that's required in the HTML to link to a CSS file called "stylesheet.css".

- <link rel = "stylesheet" href = "stylesheet.css">

External stylesheets are linked to HTML using the ___________ element within the ______________ tags.

- <link> ; <head></head>

Metadata uses the _____________ tag and must be included within the <head> tags.

- <meta>

Blockquote and Quote

- <q> a short quote. </q> • the browser puts quotes around it • a reader may say "quote ..." - <blockquote> used for longer quotes like multiple sentences of an entire paragraph </blockquote> • the browser indents the entire quote • again, the reader may say "quote ..." • usually put after you end a paragraph

Strong and Emphasis

- <strong> STRONG </strong> specified if the text is important • the browser may show the text as *bold* • a reader may say the words with strong emphasis - emphasis indicates <em> subtle </em> • the browser may show the text as italic • a reader may say the sentence differently

How CSS Works

- CSS works by *associating rules* with *HTML elements* • *selector* = selects the *content* you want to *style* • *declarations* = sit inside of *curly brackets* ({}) - each declaration has a property and a value • *property* = first word/genre • *value* = second word/ specific term

CSS stands for _______________ ___________ ____________ and is the formatting and style of a web page.

- Cascading Style Sheets

What is CSS?

- Cascading Style Sheets (CSS) allows you to *create rules* that specify how the content of an HTML element should appear in the browser - you can specify the *background* of the page as cream, all *paragraphs* in gray using Arial font, or that all h1 heading should be in blue, italic and Times font

Metadata Guidelines

- DESCRIPTION metadata should • be *unique* for each page of your site • *summarize* the contents of the page • *encourage* users to click on your link when they see it displayed in the search engine results • be *longer* than the title that is defined in the title tag - KEYWORDS are the words and phrases that Internet *users type into the search box* of a search engine, such as Google, to find what websites have info the user is looking for • *very important* for every website to have info the user is looking for • be *unique* for each page of your site • consist of no more than *10* keywords or phrases

Components of a URL

- Everything on this slide will be based on the URL http://www.modulemedia.com/ourwork/index.html - http:// = HyperText Transfer Protocol • this is the default protocol (if not specified) • may see https:// instead = the 's" means secure - www.modulemedia.com = domain name • often www. can be omitted - /ourwork/ = path/folder name - index.html = file name • this or default.html is the default (if not specified) - Recommended Naming Conventions • names should consist of lowercase letters, numbers, underscores or hyphens, and the period (.) • be clear ↳ example ° ° dog_rescue.html ° ° favorite_things_101.html

Websites are composed of ___________ and ____________ code.

- HTML and CSS

HTML Tables

- HTML creates a table *row by row* - structure • *<table></table>* = surrounds the table element • *<tr></tr>* = table row; contains multiple table data cells • *<td></td>* = table data cell • *<th></th>* = table heading - NOTE: some browsers put borders around tables and table cells by default

Formatting Large Tables

- HTML gives three tags to help structure tables: • *<thead></thead>* = defines a headings section • *<tbody></tbody>* = defines the body; most of the data • *<tfoot></tfoot>* = defines the last line(s) of the table; a footer

Headings

- HTML has 6 levels of headings • <h1> is used for *main headings* • <h2> is used for *subheadings* • <h3> - <h6> are used for less significant headings

Whitespace (Blank Space)

- HTML has no particular rules for putting blank lines of spaces into the code - many programmers indent their code to be able to follow the nesting of the elements and avoid errors with tags - blank lines are ignored by browsers, but are really nice to use to break up sections of code and make it easier to read

HTML5 and CSS3

- HTML is an evolving language. it doesn't stay the same for long before a revised set of standards and specifications are brought in to allow easier creation of prettier and more efficient sites - these are the latest versions of HTML and CSS • version 5 of HTML • version 3 of CSS - they are built on earlier versions, so they contain components of earlier versions and features - older web browsers may have "problems" rendering HTML5 and CSS3 pages

How to Comment Code

- How? • comments are about the *code* not the content ↳ bad = <!-- I got to see a volcano in Hawaii --> ↳ good = <!-- This paragraph describes things to do in Hawaii --> • explain complicated parts of the code; be informative ↳ bad = <!-- a nest list --> ↳ good = <!-- a nested list of employment data from different countries --> • use comments to *break up* portions of code ↳ bad = <!-- main sections starts here --> ↳ good = <!-- the main section contains all the paragraphs seen in the center portion of the web page --> • comment a lot, but don't comment every line

HTML stands for __________ ______________ ________.

- HyperText Markup Language

________________ is used to make web pages more interactive with rollovers and image swap.

- JavaScript

Padua has a small network that spans two buildings. This is a ______________ ___________ network.

- Local Area Network (LAN)

Browsers access websites via their addresses also called _________.

- URL

Why Comment Code

- Why? • commenting is one of the best things that you can do to *organize* your code • if you look at your code in the future, you can see what parts of it do what. it *reminds* you why you coded things the way you did • it helps you better *understand* your code • anyone else who reads it, can understand what is going on

In 1989 Sir Tim Berners-Lee invented the ________ _________ _________.

- World Wide Web

How a Static Web Page is Processed

- a client request a web page using a browser - web server receives the request and gets to appropriate HTML file and CSS files - server then sends it back to the client and the page is displayed in the browser

Ordered Lists

- a list where each item in the list is *numbered* • a recipe with a list of ingredients • a legal contract with different numbered section - uses the following tags • <ol> </ol> = ordered list • <li> </li> = list item

Unordered Lists

- a list where each item starts with a symbol (bullet point) that *does not indicate order* • a grocery list • a PowerPoint presentation - uses the following tags • <ul> </ul> = unordered list • <li> </li> = list item

Tables

- a table is a way to represent information in a *grid format*. some examples of tables: • financial reports • schedules • sports reports • statistics - tables are grids • tables are made up of *rows* (left to right) and *columns* (up and down) • each block in the grid is called a *table cell*

A Dynamic Web Page

- a web page that changes "on the fly" and updates as they are requested

The three metadata *attributes* that should always be coded in your website are: a. ____________ specifies the type of character encoding to be used b. _________ specifies the type of metadata c. ______________ specifies *values* that correspond to the value in the name attribute

- a. charsets - b. name - c. content

A CSS rule is made up of these four components: a. __________________ b. __________________ c. __________________ d. __________________

- a. selector - b. declarations - c. property - d. value

Which metadata should be unique and updated for each new webpage? a. __________________ b. __________________ c. __________________

- a. title - b. description - c. keywords

Guidelines for a Title Tag

- accurately *describe* the page's content including one or two key words - be *interesting* enough to entice the reader to click on it when it's shown in the search engine results for a search engine - be *unique* for each page in your web site - be limited to approximately *65 characters* because most search engines don't display more than that in their results

Attributes

- additional information added to the tag - always on the opening tag - consists of a *name* and a *value* • values always have double (or single) quotes around them

HTML and CSS

- all our web pages will consist of an HTML file and a CSS file — 2 separate files - start with templates for both files to ensure every assignment / project has ... • consistent structure • all the required information - save all your files on your Desktop - use *brackets* to create files

The Type Selector

- apply to all elements of the *specified* HTML type • h1 { font-family: "Courier New", monospace; } • /** makes all h1 elements look the same **/ - this is more specific than the universal selector and takes precedence

The Class Selector

- apply to any element that is in the *specified class* • .fun-heading { color: purple; } • /** classes are specified by using a period a.k.a. dot at the beginning of the rule **/ - it is more specified than both the universal and the type selectors and takes precedence - the corresponding HTML code would have to *specify* the class • <h1 *class =* "fun-heading"> Heading Here </h1> • <h3 *class =* "fun-heading"> Another Heading Here </h3>

CSS Comments

- are set up differently from HTML comments • <!-- HTML Comment --> • /** CSS Comment **/

Line Breaks and Horizontal Rule

- because browsers ignore blank lines and extra spaces, HTML provides two hand tags • <br /> creates a break to next line • <hr /> creates a horizontal rule (horizontal line) - *empty tags* • <br /> and <hr /> have no closing tags ↳ *need spaces* between letters (br or hr) and /

The ______________ selector applies to any element that has the specified class and uses the ____________ (symbol) before the selector. In contrast, the ____________ selector applies to any element that has the specified ID and uses ___________ (symbol) before the selector.

- class ; . - ID ; #

How a Dynamic Web Page is Processed

- client requests a web page using a browser - web server receives the request and contacts the appropriate application server - the application server processes a *script (program)* that builds the web page (written using HTML). it may need to access data from a Database server - the web page is returned to the client by the Web server to be displayed in the browser

Paragraphs

- consist of one or more sentences • <p> is used to start a new paragraph • </p> is the end of the paragraph • a new paragraph is always displayed starting on a new line (whether you put it on a new line in you code or not) with space between it and the previous / next paragraph or element ↳ elements that automatically start on new lines are called *block elements* ° ° examples → → <p> → → <h1> - <h6> → → <blockquote>

Email Links

- create a link that starts up an email program and addresses the email address • <a href = "mailto:[email protected]">email me</a> - when the user clicks on the email me link, a new email opens up with the specified address

HTML (HyperText Markup Language)

- describes the structure of a web page. HTML files also contain the content of the web page - tags define the different elements of the page

The ________________ metadata should encourage users to visit your website when it's displayed in search results.

- description

CSS that's in its own file and is linked to the HTML page using code is called __________ __________.

- external stylesheet

When creating a favicon, use an online ____________ _____________.

- favicon generator

A _____________ is a small image in the __________________ file format that represents your website. It is optional but gives a professional touch to your website.

- favicon; Microsoft ICO

Absolute URL vs. Relative URL

- if the domain is *specified*, the URL is *absolute* • <a href = "http://www.paduaacademy.org">Padua</a> ↳ domain = .com, .org, etc. - if the domain is *not specified*, the URL is *relative* • <a href = "news/today/news-file.html">News</a>

Opening Links in a New Window

- instead of opening a link in the same window, use the *target* attribute to open it in a new window • ex: <a href = "http://www.imdb.com" target="_blank">IMDB</a> ↳ *must use the "_blank"* - when the user clicks on the link, a new window opens up with the specified website in it. The website with the link on it remains open in its window

What is Metadata?

- is data that *describes* your website - adding metadata helps *search engines*, like Google, find your page easier - it is defined using the *<meta>* tag, which lives inside of the *<head>* element

Review Metadata

- is the data that *describes* your website - metadata is *located* in the *<head>* section (not displayed on the web page) - adding metadata helps search engines like Google find your page easier - three attributes of the <meta> tag ... • charset - always *"uft-8"* • name - "description" or "keywords" • content - text - title shows up in the tab or top bar of the browser - favicon is a *small image* that shows up next to the title

The Universal Selector

- it applies to *all elements* on the page - it is best to use it to clear all defaults by putting this at the top of your CSS file • * {margin: 0; padding: 0; } - this allows the programmer to *specify margins* and *padding* individually using other, more specific selectors

The ____________ metadata should consist of no more than 10 words or phrases, and should be unique for each page.

- keywords

Links

- links are the *defining feature* of the web because they allow movement from one page to another enabling the very idea of browsing or surface - to create a link, HTML uses the *<a>* tag • Ex: <a href = "http://www.imbd.com">IMBD</a>

The Internet is ...

- made up of a bunch of web pages - sources with a lot of information

Why Use External Style Sheets

- more than one HTML page can use the same style sheet • code does not have to be *repeated* or *retyped* - one style sheet for *multiple pages* means the page will *load quicker* after the first one is loaded - if you want to make changes to your site, you only need to change it in one place • can change the look of *every <h1>* section with the metadata - the HTML code is not *cluttered* with the styles; it just contains the content

How Pages Use Structure

- most documents have a structure that may or may not include ... • heading • text • subheadings • quotes • pictures - some may have • sections • lists • checkboxes

How JavaScript Works

- processing on JavaScript is done on the client (not the server) - three common uses of JavaScript • data validation • image swaps and rollovers ↳ swaps = being able to switch from images ↳ rollovers = used to produce an effect in which the appearance of an images changes when you roll the mouse pointer over it • slideshows

Nesting Lists

- putting lists inside of lists - this is *not* a type of list. it is a way of putting lists together into a larger, more detailed list

The line above (<link rel = "stylesheet" href = "stylesheet.css">) uses these *two attributes*:

- rel - href

Metadata helps __________ ____________ like Google find your webpages.

- search engines

Making a Web Page Dynamic

- server-side scripting languages • ASP.NET • JSP • PHP • ColdFusion • Ruby • Perl • Python • Java

Name two kinds of clients that may request web pages: ______________ & ____________.

- smart phone & laptop

Metadata Attributes

- specific types of metadata are added to a site using attributes - there are 3 main attributes of the <meta> tag: • *Charset* = specifies the *type of character encoding* to be used • *Name* = specifies the type of metadata — *"description"* and *"keywords"* are used by search engines • *Content* = specifies *values* that correspond to the name attribute

Tags

- specified using < > (called angle brackets) - most (but not all) elements have an opening and closing tag - the closing tag has a </ > (slash, not a backslash) • <p> _____ </p> (p = paragraph) • <h1> ______ </h1> (h= heading)

There are two types of web pages, ______________ which can be changed by a programmer and ______________ that are updated as they are requested.

- static; dynamic

Semantic Element Tags

- tags that are not intended to affect the structure of the page; *they add information* to the page instead - some change the formatting of the text, but that is not their sole purpose - screen readers (for vision-impaired users) use some of these semantic tags to correctly read the text

Structural Markup Tags

- tags used to specify the structure of the web page - browsers understand these tags and know what to do with them - structural tags you already know ... • <head> </head> = information not displayed • <body> </body> = content displayed

The <link> Element

- the *<link>* element is used to specify the *CSS stylesheet* for the web page - the <link> element goes into the <head> section with the metadata - can use *multiple <link>* elements to specify *multiple CSS files* used for a page

The ID Selector

- the ID selector applies to the *one element* that has the ID • #intro { font-size: 100%; font-style: bold; } • /** id's are specified by using # at the beginning of the rule **/ - this is more specific than the universal selector, type selector, and the class selector; it takes precedence - the corresponding HTML would specify the ID • <hgroup *id =* "intro">The Main Heading of the Page</hgroup> - each ID can *only be used once* in the HTML

Other Metadata: Title and Favicon

- the contents of the *<title>* tag are either shown in the top of the browser above the address bar or on the tab for that page - a browser displays a *small image* called a *favicon* next to the title - favicons show up when you bookmark a site or create a shortcut to the site on your computer or smart phone - just like website titles, favicons are defined inside of the *<head>* tag - while the title uses a <title> tag, favicons use a *<link>* tag - within the <link> tag, you must define the *rel* attribute and the *href* attribute • the *rel* attribute specifies the *relationship* between the *current site* and the *linked document* • the *href* attribute specifies the favicon *file name*

CSS and the Box

- the key to understanding how CSS works is to *imagine* there is an *invisible box* around every *HTML element* - CSS allows you to *create rules* that control the way each individual box and the contents of that box are displayed - below *block elements* are in *red* and *inline elements* are in *green* - using CSS, you can *add* a border around any of the boxes, specify its width and height, or add a background color. You can also control the text inside the box and specify its color, size and font

Websites reside on ______ ___________ ____________ that can be anywhere in the world.

- the web server

Domain Names

- these are easy-to-remember words that can be used to access the website we want to visit • examples (more on slides) ↳ ifewire.com ↳ nytimes.com ↳ navy.mil ↳ harvard.edu ↳ monster.ca ↳ wikipedia.org ° ° .org are non profit organizations so money coming in goes back out ↳ japantimes.co.jp ↳ dublin.ie ↳ gamesindustry.biz ↳ spain.info - you have to buy your domain name

Linking to a Part of the Same Page

- this is great for... • a table of contents on a page • a link that takes a person from the bottom of a long page back to the top - use the id attribute to define points on the page • <h1 id= "top"> ACME Tours </h1> ↳ ID's must be unique - later on the page you can put a link to jump to the top • <a href= '#top'>Top</a> ↳ use the hashtag (#) to specify the ID

A Static Web Page

- this type of page *does not change* unless the programmer changes it

The ______________ is only displayed in the tab of the webpage or the top of the browser. Otherwise it is not part of the displayed webpage.

- title

The _____________ selector applies to one the element specified and uses the _____________ as the selector.

- type ; _ {}

The ______________ selector applies to *all elements* on the page and uses the ____________ (symbol) as the selector.

- universal ; *

Three Ways to use CSS

- use the *style attribute* to apply styles to a single element - *embed* the styles in the *head* section - use an external style sheet

Definition Lists

- used for a series of terms and their definitions - uses the following tags • <dl> </dl> = definition list • <dt> </dt> = definition term

Web Page with Image Swaps and Rollovers

- uses JavaScript to do this • it gets attached to the pictures on a website to switch colors of an image - JavaScript *is not* Java

Adding Table Headings

- using the table heading tag (<th></th>) to add a heading to a column or row • it automatically *bolds* and *centers* the contents • it takes the place of the *<td></td>* in the row - NOTE: cells automatically adjust to the size of the data inside

Favicon Guidelines

- well-designed favicons are *styled to match the logo or theme* of your website, that way users have a quick and easy way to recognize your website at a glance - use the *Microsoft ICO* format for favicons because this format works in all browsers - use an online favicon generator

Linking to Pages on the Same Site

- when linking to other pages on the same site, the domain name does not need to be specified - if all the pages of a site are in the same folder, then just the page name is needed - if they are in different folders, then you need the path - this is called the *relative URL* • ex: <a href = "about-us.html">About</a> ↳ the relative file name; the browser looks for it in the same place where the current page is saved

Linking to Other Sites

- when linking to other sites, the value in the href attribute is the full web address for the site. - this is called the *absolute URL* (Uniform Resource Locator) • ex: <a href = "http://www.rottentomatoes.com">Rotten Tomatoes<a/> ↳ when no html file is specified, the default homepage is displayed (index.html) ↳ *destination address* uses the domain name (web site name)

Nesting Tags

- when stringing tags together, be sure to keep them nested correctly • correct = <p> Order your copy <i> today! </i> </p> • incorrect = <p> Order your copy <i> today! *</p> </i>*

Spanning Rows

- you may also have entries in a table that need to stretch down across multiple rows - use the rowspan attribute to do this • <td *rowspan =* "#"> make this cell go down # rows </td> ↳ it goes *up and down* within the columns

Spanning Columns

- you may have entries in a table that need to stretch across multiple columns - use the colspan attribute to do this • <td *colspan =* "#"> makes this cell go across # columns </td> - notice you must adjust the number of cells to compensate for the wider cell ↳ it goes *left to right* across the rows

You Must Have Metadata

- you will be graded on the quality of metadata in your projects • you must have ... title, charset, description, and keywords • favicon is optional