HTML and CSS Overview of the WWW

• • 1969 - ARPANET • Global interconnected network of computer networks • WWW • NSFNET removes restriction on commercial use of Internet • Tim Berners-Lee at CERN created WWW as a way to hyperlink to documents to view them; used: • HTML ( Markup Language) • HTTP (HyperText Transfer Protocol) • URLs (uniform resource locator) • Mosaic becomes available Overview of the WWW (cont)

• Client/Server Model • Describes relationship between two computer programs • Client requests a service • E.g., requests Web page using HTTP and URL • Server fulfills the request • E.g., Web server sends the Web page file • Client and server usually reside on different computers Overview of the WWW (cont)

• URL • Specifies a Web page address • Basic form: how://where/what • how - protocol • where – domain name of the computer • what – local name of file including the path to it (name can be omitted if it is index.) • Example: http://cs.unh.edu/~sna4/408/index.html | | | | | protocol | folder | file name domain name of Web server sub-folder Overview of the WWW (cont)

• Domain names • Locates an organization or other entity on the Internet • DNS (Domain Name System) • Divides the Internet into logical groups • Associates domain names with unique IP address • TLDs – Top-Level Domain Names • Right most part of the domain name • Either generic or country code • Generic examples: .com, .mil, .org, .name, .gov • Country code examples: .au, .de, .in, .jp, .nl, .us, eu Overview of the WWW (cont) • IP addresses • Each device on the Internet is assigned an IP address • IPv4 allowed for at most 4 billion possible IP address • Not enough with proliferation of mobile devices • IPv6 is most recent version of the Internet Protocol • IP address is lengthened from 32 bits to 128 bits (4 bytes to 16 bytes) • 2128 possible unique addresses available HTML

• HyperText Markup Language • Started in early 90s, version number increased as language evolved • Simple, text-based mark-up language • Describes meaning of the content • Paragraphs, headings, lists, etc. • Works with CSS (Cascading Style Sheets) HTML (cont.)

• CSS (cont.) • Defines how your content and Web page will look • Created in 1996 (after HTML) • • Info on WWW should be accessible to all • Describe content with HTML - accessible to all • Add design with CSS • Viewable with old browsers, mobile devices, screen readers, etc. Web Page Building Blocks

Web page consists of three components: 1.Text content 2.References to other files E.g., image files, audio, video, links to other pages, style sheets 3.Markup • HTML elements that describe text content • Does not define how content should appear in browser • Browser has built-in CSS file (aka style sheet) that specifies how each HTML element displays by default Basic HTML Page

Hello HTML

Hello World!

Basic HTML

• HTML tags do not appear in the browser • Always use HTML5’s DOCTYPE declaration • Code above the is info for browsers and search engines – not visible except for title • Text in title: … appears at top of browser • Default name of browser bookmark • Valuable info for Basic HTML (cont.)

• Page’s content goes between … -- this part is visible to users • signals the end of the page • Lines in example are separated with carriage return – this just makes the code easy to read Semantic HTML

• Markup describes the meaning of the content, does not define how the content should appear (CSS does that) • Before HTML5 there were block-level and inline elements; now inline = phrasing content • Why matter: • Improved • Improved SEO • Lighter code and faster pages • Easier code maintenance and styling Markup: Elements, Attributes, and Values • There are 3 principle markup components: • Elements - can contain text or they can be empty and describe the different parts of the Web page: • I am happy to be here! • • Attributes contain info about the content in the document Books href is an attribute of a; http://www.amazon.com is the value for href Some Elements

●

…

paragraph ●
…
a distinct piece of content ●

…

heading level 1 (most important) ● … ●
…
heading level 6 (least important) ● … important text (usually the same as , bold text) ● … stress emphasis (is usually the same as , italicizing content) ● … link (phrasing content element) Parents and Children

• If one element contains another, it is said to be the parent of the enclosed, or child, element:

I am happy to be here.

• Any elements contained in the child element are considered descendants of the outer, parent element. • Each element must be properly nested • Incorrect:

Hello world

! Text Content

• White space collapses when rendered by browser • It is standard practice to encode pages in UTF-8 • Unicode is a superset of ASCII (American Standard Code for Information Interchange) • The document’s character encoding is specified right after the tag using the charset attribute • Character references are replaced by the corresponding symbol; e.g., © is © File Names

• File names are case sensitive • Use .html extension • Suggestions: • No spaces in file names • Use lowercase to avoid confusion • Use – (dash) instead of _ (underscore) URLS

• Absolute urls contain all three parts of the url: how://where/what • Relative urls are relative to the currently loaded page on the same server where/what (don’t need where if same directory) Use .. to point to a directory at a higher level of the file hierarchy (Ex: ) • Use relative when possible to make code portable HTML Tag - Comments

• Provides a way to document your HTML code and make notes to yourself • Comments are not rendered by browser (you need to view the source code to see them) • You can place a comment anywhere in your HTML • Example: Note: Do not include embedded HTML code in the comment tag as this may produce unpredictable results HTML Tag - Paragraph

…

• Use the paragraph tag to break text into paragraphs • Enclose block of text with beginning and ending paragraph tags • Examples: 

This is the title sentence for the first paragraph.

This is the start of paragraph two.

This is the third paragraph.

This is the title sentence for the first paragraph.

This is the start of paragraph two.

This is the third paragraph.

• Note: In the examples, both will be rendered exactly the same by the Web browser but the source code for the second one is easier for us to write and read. HTML Tag – Line Break

• The
tag adds a line break but the browser does not add any vertical space • Notice the built-in ending tag • Example:

This is the title sentence
for the first paragraph.

HTML Tag - Headings

…

etc.

• Use heading tags to designate headings and sub- headings • Most browsers support a hierarchy of six levels of HTML headings where

is the largest and

is the smallest • Browsers will display the headings in bold with various sizes and spacing on separate lines • Example 1:
Copyright Sofia Lemons, 2016. All rights reserved.
• Example 2:

Sofia’s Homepage for CS408

Spring 2016

HTML Tag - Image • Used to include in-line images • src (source) attribute is used to specify the URL of the image to be displayed • Either relative or absolute URL can be used to point to image file • 3 most common image file types have .gif, .jpg, or .png extensions • Other attributes are: • alt - an “alternative” text string that describes the image • height and width - the dimensions of the image in pixels • Importance of using the alt, height, and width attributes • Notice built-in end of tag! HTML Tag - (cont)

Example 1: uses a relative url Example 2: not recommended! Uses absolute url HTML Tag - Anchor … • Anchor tag is used to create hyperlinks • Three basic parts of a hyperlink: • Beginning and ending tag pair … • href (hypertext reference) attribute that specifies the URL of the page to be loaded when the hyperlink is selected • Text or graphic that appears on-screen as the active link Clickable Text Hyperlinks

• Text is used as the “hot spot” for the link My Homepage • Example 1: My Homepage This uses a relative URL • Example 2: Wh ite House This uses an absolute URL Clickable Image Hyperlinks

• An image is used as “hot spot” for link • Example: Mailto Hyperlinks

• Provides a convenient way for someone viewing your Web page to send you e-mail • Example: Contact Sofia A mail dialog box is launched when link is selected; the To field is already filled in Note: syntax for mailto: URL is different from the http:// URL - no double slashes Mailto Hyperlinks - cont

Most browsers extend the mailto urls with subject and cc: • Example 1: Contact Sofia • Example 2: Contact Sofia Intra-document Links

• Allow you to link to other places on the same page • Any element with an id attribute can act as an anchor • Put a # sign before the name of the id you want to jump to • The label that follows the # sign is called the fragment • Example:

Welcome to My Homepage

(content goes here…) Go to top of page l To link to a particular anchor on another page, add the # sign followed by the fragment to the end of the url Changing the Appearance of Hyperlinks

• By default hyperlinks are underlined – use CSS to change default appearance • There are 5 link states (aka pseudo-classes): • unvisited (default color is blue) • visited (default color is purple) • hover • focus • active (default color is red) • Using the a selector by itself you can set properties that apply to all link states; e.g., a {color: #00FF00;} makes all links green (visited and unvisited) Changing the Appearance of Hyperlinks (con’t)

• You can style the various states by using the pseudo- classes • Example: a:link {color: #00FF00; } a:visited {color: #FF0000;} a:hover {text-decoration: none;} a:focus {background-color: #FFFF00;} a:active {color: #000000;} Tips for Creating Hyperlinks

• Try not to split hyperlinks over lines • Do not put two or more hyperlinks side by side • Do not use long lines of text as hyperlinks • Do not use underlining near hyperlinks • Do not use phrases like “click here” as the hotspot for a hyperlink. • When using CSS, do not change the font size, font weight, or font style when hovering over a hyperlink as it may cause the surrounding content to move. • Do use CSS to style the various states of your hyperlinks so that you offer cues to your users. Lists

• Used for organizing data as well as navigational links • Three types of lists: • Ordered – use bullets that are decimal, lower- roman, upper-roman, upper-alpha, lower-alpha • Unordered – use bullets that are disc, circles, squares, a custom image, or none at all • Definition (aka Dictionary) – consist of term and definition pairs Lists (con’t)

• Basic ordered list:

  1. first thing
  2. second thing
  3. next thing
Lists (con’t)

• Basic unordered list:

  • Something
  • Another thing
  • Still one more thing
Lists (con’t)

• Basic definition list:

Some data term
Some data definition
Another term
Another data definition
Lists (con’t)

• Use CSS to change presentation of list • list-style-type property values; e.g., ol { list-style-type: lower-roman; }

• none – no list marker • disc (default for unordered lists) – solid circles • circle – hollow circles • square – solid squares • decimal (default for ordered lists) – 1, 2, 3, … • lower-roman – I, ii, iii, … • upper-roman – I, II, III, … Lists (con’t)

• list-style-image property for custom bullets; e.g., ul { list-style-image: url(IMAGES/bullet.gif); } • list-style-position property to control where the bullet is positioned: inside or outside the content box About Colors and HTML

Two ways to define colors in HTML documents: 1 - Color names Browsers have predefined lists of colors; e.g., blue, cranberry, green, orange, red, yellow 2 - Color numbering scheme A bit more complex but better supported across different platforms HTML and Colors (con’t)

• RGB Color Model – method to represent colors - combinations of Red, Green, and Blue • COLORS are represented by three two-digit hexadecimal numbers • Each two-digit hex number signifies the amount of one of the three colors: RED, GREEN, and BLUE RGB Color Model digit1 digit2 digit3 digit4 digit5 digit6 red green blue

• Each digit is a hexadecimal number (base 16) • A hexadecimal digit ranges from 0 to F • A two-digit hexadecimal number can represent numbers from 0 to 255 in decimal • The RGB color model can represent (256)³ (over 16 million) possible color combinations Hexadecimal Numbers

One hexadecimal number is shorthand for representing 4 bits; Two hexadecimal numbers can be used to represent 1 byte: • 1 byte = 8 bits • bit stands for binary digit and is either a zero or one • Bits are useful for counting in base 2; 8 bits can represent decimal numbers from 0 to 255 Some Colors and Their Hex Representations

• Black #000000 • Blue #0000FF • Crimson #DC143C • Gold #FFD700 • Green #00FF00 • Gray #808080 Note: equal amounts of red, green, and blue will yield a shade of gray • Orange #FFA500 • Purple#800080 • Red #FF0000 • Salmon #FA8072 • White #FFFFFF • Yellow #FFFF00 RGB Color Model – Some Links HTML Background Color Selector: • http://www.imagitek.com/bcs.html • Color Picker 3.1: • http://www.pagetutor.com/colorpicker/index.html • Color Picker: Hexadecimal Color code generator: • http://www.free-webmaster-tools.com/colorpicker.htm#colorpicker • VisiBone Webmaster’s Color Lab: • http://www.visibone.com/colorlab • Color Scheme Designer: • http://colorschemedesigner.com