CECS 470 Lab Assignment 3: HTML and CSS Due Date: Wednesday, 2/13/2019

Total Page：16

File Type：pdf, Size：1020Kb

CECS 470 Lab Assignment 3: HTML and CSS Due date: Wednesday, 2/13/2019 40 points 1. [ 3 points] Use the embedded style, style the web page in the lab assignment 2 with the following styles: h1 - color: blue; background -color: yellow h1, h2, h3 - font family: "Trebuchet MS", "Lucida Grande", Tahoma, sans- serif body – font family: Georgia, Cambria, "Times New Roman", serif 2. [6 points] Use the separate CSS file, style the web page in the lab assignment 2 with the following styles: header, footer - color: white; background color: 213643; nav - background color: 728B96; h1, h2, h3 - font family: "Trebuchet MS", "Lucida Grande", Tahoma, sans-serif; body – font family: Georgia, Cambria, "Times New Roman", serif; Change the text Review to red Class first to color: 728B96; font style: italic; 1 3. [ 31 points] This problem updates your existing web page from the lab assignment 2 to add some visual stylistic improvements with CSS. Instructions Create an external style sheet called reset.css that removes all the browser formatting from the main HTML elements and reference inside the html file as follows: html, body, header, footer, main, nav, article, section, figure, figcaption, h1, h2, h3, ul, li, body, div, p, img { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; border: 0; } Create another external style sheet named lab3.css and link to it in your HTML file. Add styles to lab3.css so that it looks similar to that shown in Figure below. Do not modify the markup within the <body> element. 2 Be sure to group your style rules together in appropriate commented sections and to make your sizes scalable (i.e., try to avoid using pixels for font sizes, padding, or margins). Here's a hint for the header and footer. header, footer { color: white; background-color: #1A237E; 3 margin: 0em 4em 0.25em 4em; } Grading Demonstrate the lab assignment to the instructor to the lab Return the print out of html file and css file for each problem Submit html file and css file for problem 3 to the BeachBoard 4 .

Copy Link

Recommended publications

Cloud Fonts in Microsoft Office
APRIL 2019 Guide to Cloud Fonts in Microsoft® Office 365® Cloud fonts are available to Office 365 subscribers on all platforms and devices. Documents that use cloud fonts will render correctly in Office 2019. Embed cloud fonts for use with older versions of Office. Reference article from Microsoft: Cloud fonts in Office DESIGN TO PRESENT Terberg Design, LLC Index MICROSOFT OFFICE CLOUD FONTS A B C D E Legend: Good choice for theme body fonts F G H I J Okay choice for theme body fonts Includes serif typefaces, K L M N O non-lining figures, and those missing italic and/or bold styles P R S T U Present with most older versions of Office, embedding not required V W Symbol fonts Language-specific fonts MICROSOFT OFFICE CLOUD FONTS Abadi NEW ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 Abadi Extra Light ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 Note: No italic or bold styles provided. Agency FB MICROSOFT OFFICE CLOUD FONTS ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 Agency FB Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 Note: No italic style provided Algerian MICROSOFT OFFICE CLOUD FONTS ABCDEFGHIJKLMNOPQRSTUVWXYZ 01234567890 Note: Uppercase only. No other styles provided. Arial MICROSOFT OFFICE CLOUD FONTS ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 Arial Italic ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 Arial Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 Arial Bold Italic ABCDEFGHIJKLMNOPQRSTUVWXYZ
[Show full text]
Publication Notes – 3Nt.Xyz
Publication Notes – 3nt.xyz Pete Matthews Jr – https://3nt.xyz – © June 19, 2021 Some of the material in this document originally appeared on the MIT/DL Bridge Club site, at http://web.mit.edu/mitdlbc/www/contrib.html. This article, at https://3nt.xyz/about/, is now the official home of this material. Look for updates here. Most of the MS Office documents about the game of bridge use the free Cards font. Starting in 2018, this font is also used in writing up deals with Bridge Composer. Many of the Portable Bridge Notation (PBN) files on this site were created or edited with BridgeComposer; some were created with Dealmaster Pro. The PDF files should be complete and need only Acrobat Reader. That is, all necessary font components are embedded in the files. Items are noted (I) when appropriate for Intermediate players, or (A) for Advanced or Advancing players. Titles of mainstream articles are bold, while more esoteric or less important titles are in italics. Media Codes To describe attributes of the intended media, PDF documents are noted with these Media Codes: Media Size Description Portrait orientation, 1-2 columns, US Letter, usually single column, best 8.5"W for printing and viewing on a moderate to large screen. Articles P x 11"H published before July 1, 2018 and most other bridge material is in this format. 11"W x Landscape orientation, 1-2 columns, US Letter. Only used fort the L 8.5"H occasional spreadsheet that is too wide for some other format. Portrait orientation, 1 column, US Junior (Half Letter).
[Show full text]
Lushootseed Unicode Keyboard Help
Lushootseed Unicode Keyboard 1.1 Overview Design This Keyman keyboard is designed for Lushootseed, a language of the Pacific Northwest spoken in Washington state. The arrangement of Lushootseed letters on this keyboard closely follow the arrangement of keys in a standard English QWERTY keyboard. On Screen Keyboard This keyboard includes an On Screen Keyboard view for easy reference. The On Screen Keyboard works best when associated with a QWERTY US layout. Fonts This is a Unicode keyboard and works with any Unicode font which has support for Lushootseed characters. Common fonts which work with Lushootseed are: Arial Consolas Arial Unicode MS Courier New Calibri Tahoma Cambria Times New Roman This keyboard also includes the following fonts which work well with Lushootseed: Lushootseed Sulad Gentium Plus Lushootseed School Keyboard Layout Lushootseed Unicode: Unshifted ` 1 2 3 4 5 6 7 8 9 0 - = Backspace © 1 2 3 4 5 6 7 8 9 0 - = Tab q w e r t y u i o p [ ] \ q w ə š t y u i ʷ p [ ] \ Caps Lock a s d f g h j k l ; ' Enter a s d ʔ g h ǰ k l ɬ ' Shift z x c v b n m , . / Shift & x c č b n m , . / Ctrl Alt Alt Ctrl Lushootseed Unicode: Shifted ~ ! @ # $ % ^ & * ( ) _ + Backspace © ! @ # $ % ^ & * ( ) _ + Tab Q W E R T Y U I O P { } ¦ ; < ;ʷ = > kʷ ? { } ¦ Caps Lock A S D F G H J K L : " Enter qʷ dᶻ gʷ Aʷ A B C " Shift Z X C V B N M < > ? Shift &ʷ xʷ E F G H I < > ? Ctrl Alt Alt Ctrl Keyboard Details You can find most keys on the Lushootseed keyboard by thinking of a similar letter in English.
[Show full text]
Choosing Fonts – Quick Tips
Choosing Fonts – Quick Tips 1. Choose complementary fonts – choose a font that matches the mood of your design. For business cards, it is probably best to choose a classic font. *Note: These fonts are not available in Canva, but are in the Microsoft Office Suite. For some good Canva options, go to this link – https://www.canva.com/learn/canva-for-work-brand-fonts/ Examples: Serif Fonts: Sans Serif Fonts: Times New Roman Helvetica Cambria Arial Georgia Verdana Courier New Calibri Century Schoolbook 2. Establish a visual hierarchy – Use fonts to separate different types of information and guide the reader - Use different fonts, sizes, weights (boldness), and even color - Example: Heading (Helvetica, SZ 22, Bold) Sub-heading (Helvetica, SZ 16, Italics) Body Text (Garamond, SZ 12, Regular) Captions (Garamond, SZ 10, Regular 3. Mix Serifs and Sans Serifs – This is one of the best ways to add visual interest to type. See in the above example how I combined Helvetica, a sans serif font, with Garamond, a serif font. 4. Create Contrast, Not Conflict: Fonts that are too dissimilar may not pair well together. Contrast is good, but fonts need a connecting element. Conflict Contrast 5. Use Fonts from the Same Family: These fonts were created to work together. For example, the fonts in the Arial or Courier families. 6. Limit Your Number of Fonts: No more than 2 or 3 is a good rule – for business cards, choose 2. 7. Trust Your Eye: These are not concrete rules – you will know if a design element works or not! .
[Show full text]
Standard Fonts List Used for Poster Creation
Standard Fonts List used for Poster Creation Please use any of the fonts listed below when designing your poster. These are the standard fonts. Failure to comply with using a standard font, will result in your poster not printing correctly. 13 Misa Arial Rounded MT Bold Bodoni MT 2 Tech Arial Unicode MS Bodoni MT Black 39 Smooth Arno Pro Bodoni MT Condensed 4 My Lover Arno Pro Caption Bodoni Poster MT Poster Compressed Abadi Condensed Light Arno Pro Display Book Antiqua ABCTech Bodoni Cactus Arno Pro Light Display Bookman Old Style ABSOLOM Arno Pro Smdb Bookshelf Symbol 7 Adobe Calson Pro Arno Pro Smdb Caption Bradley Hand ITC Adobe Calson Pro Bold Arno Pro Smdb Display Britannic Bold Adobe Fangsong Std R Arno Pro Smdb SmText Broadway Adobe Garamond Pro Arno Pro Smdb Subhead Brush Script MT Adobe Garamond Pro Bold Arno Pro SmTest Brush Script Std Adobe Heiti Std R Arno Pro Subhead Calibri Adobe Kaiti Std R Baskerville Old Face Californian FB Adobe Ming Std L Bauhous 93 Calisto MT Adobe Myungjo Std M Bell Gothic Std Black Cambria Adobe Song Std L Bell Gothic Std Light Cambria Math Agency FB Bell MT Candara Albertus Extra Bold Berlin Sans FB Castellar Albertus Medium Berlin Sans FB Demi Centaur Algerian Bernard MT Condensed Century AlphabetTrain Bickham Script Pro Regular Century Gothic Antique Olive Bickham Script Pro Semibold Century Schoolbook Arial Birch Std CG Omega Arial Black Blackadder ITC CG Times Arial Narrow Blackoak Std 1 Standard Fonts List used for Poster Creation Please use any of the fonts listed below when designing your poster.
[Show full text]
Best Font Style to Use for Resume
Best Font Style To Use For Resume acridUnrepugnant Ruben gripes Brandy glissando. singularizing Dieter that is ideographsfree-and-easy: aims she shakily bestriding and alkalifies depreciatingly tenaciously. and begirding Oncogenic her Tylerdiversion. chimneyed some bands after Pick one font for your capture and section headings and another, complementary font for the rest alongside your content, Yurovsky says. Our default font but today is professional resume best font to use for style, interests section titles of hiring professionals. Corporate brand logos often use Helvetica. PDF files, MS Word documents, text files, parsing software, etc. My resume because now one old long, the three. The first application, who have to use font to for best style resume builder and do have to? Pairing fonts together which help desk cover letter like resume on shine. It a hard to best font to use for resume style, noting that you! Serif has traditionally been often most recommended font family for creating resumes. Arial: A popular and warm choice only a modern sans serif font, Arial is applauded for clean lines and good legibility. The lines in Arial are cleaner and straighter, with no tails. As with font type, the rod here by for get resume still be readable. They even cause scanning software often make errors and talk your resume. Then police might want to scorn it. By war looking again it on paper, you may i able to request it event at precious glance. Atque ipsum quas quis repellat voluptate. They sink that rule most professional font for resume states itself nor a unique, authoritative and modern tool for benefiting an outline.
[Show full text]
Sketch Block Bold Accord Heavy SF Bold Accord SF Bold Aclonica Adamsky SF AFL Font Pespaye Nonmetric Aharoni Vet Airmole Shaded
Sketch Block Bold Accord Heavy SF Bold Accord SF Bold Aclonica Adamsky SF AFL Font pespaye nonmetric Aharoni Vet Airmole Shaded Airmole Stripe Airstream Alegreya Alegreya Black Alegreya Black Italic Alegreya Bold Alegreya Bold Italic Alegreya Italic Alegreya Sans Alegreya Sans Black Alegreya Sans Black Italic Alegreya Sans Bold Alegreya Sans Bold Italic Alegreya Sans ExtraBold Alegreya Sans ExtraBold Italic Alegreya Sans Italic Alegreya Sans Light Alegreya Sans Light Italic Alegreya Sans Medium Alegreya Sans Medium Italic Alegreya Sans SC Alegreya Sans SC Black Alegreya Sans SC Black Italic Alegreya Sans SC Bold Alegreya Sans SC Bold Italic Alegreya Sans SC ExtraBold Alegreya Sans SC ExtraBold Italic Alegreya Sans SC Italic Alegreya Sans SC Light Alegreya Sans SC Light Italic Alegreya Sans SC Medium Alegreya Sans SC Medium Italic Alegreya Sans SC Thin Alegreya Sans SC Thin Italic Alegreya Sans Thin Alegreya Sans Thin Italic AltamonteNF AMC_SketchyOutlines AMC_SketchySolid Ancestory SF Andika New Basic Andika New Basic Bold Andika New Basic Bold Italic Andika New Basic Italic Angsana New Angsana New Angsana New Cursief Angsana New Vet Angsana New Vet Cursief Annie BTN Another Typewriter Aparajita Aparajita Bold Aparajita Bold Italic Aparajita Italic Appendix Normal Apple Boy BTN Arabic Typesetting Arabolical Archive Arial Arial Black Bold Arial Black Standaard Arial Cursief Arial Narrow Arial Narrow Vet Arial Unicode MS Arial Vet Arial Vet Cursief Aristocrat SF Averia-Bold Averia-BoldItalic Averia-Gruesa Averia-Italic Averia-Light Averia-LightItalic
[Show full text]
Bookman Old Style (16 Pt-Bold)
CDI BEST PRACTICES TIP SHEET Recommended Fonts for Résumés Compatible with Word 2003 (.doc) Most Common Serif Fonts Font Names Acceptable Sizes & Styles Acceptable Sizes & Styles (all keyed in 12 point) Body Content Letterhead & Section Headings Book Antiqua Book Antiqua (12 pt –bold) Book Antiqua (16pt –bold) Book Antiqua (12 pt – italics) BOOK ANTIQUA (16pt –bold caps) Book Antiqua (11 pt) OOK NTIQUA (16pt – bold small caps) Book Antiqua (11 pt- bold) B A Book Antiqua (11 pt – italics) Book Antiqua (14pt –bold) BOOK ANTIQUA (14pt –bold caps) BOOK ANTIQUA (14pt – bold small caps) Book Antiqua (12pt –bold) BOOK ANTIQUA (12pt – bold caps) BOOK ANTIQUA (12pt –bold small caps) Bookman Old Style Bookman Old Style (12 pt- bold) Bookman Old Style (16 pt-bold) Bookman Old Style (12 pt- italics) BOOKMAN OLD STYLE (16 pt – bold caps) Bookman Old Style (11 pt) OOKMAN LD TYLE (16 pt – bold small caps) Bookman Old Style (11 pt-italics) B O S Bookman Old Style (10 pt) Bookman Old Style (14pt-bold) Bookman Old Style (10 pt-bold) BOOKMAN OLD STYLE (14pt –bold caps) BOOKMAN OLD STYLE (14pt – bold small caps) Bookman Old Style (12pt –bold) BOOKMAN OLD STYLE (12pt – bold caps) Courtesy of Norine Dagliano, ekm Inspirations February 2013 Garamond Garamond (12pt –bold) Garamond (16 pt-bold) 12 pt – italics) Garamond ( GARAMOND (16 pt- bold caps) Garamond (11-pt) GARAMOND (16 pt – bold small caps) Garamond (11 pt- bold) Garamond (14 pt – bold) GARAMOND (14 pt – bold caps) GARAMOND (14pt – bold small caps) Georgia Georgia (12pt –bold) Georgia (16 pt –bold)
[Show full text]
TTF Source Font Version Font Name Example Text Arial.Ttf Version 7.00 Arial Arial
TTF Source Font version Font Name Example text arial.ttf Version 7.00 Arial Arial - 0123456789 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ äöüÄÖÜß !"#$%&'()*+,-./:;<=?@[\]^_``{|}~ arial.ttf Version 6.98 Arial Arial - 0123456789 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ äöüÄÖÜß !"#$%&'()*+,-./:;<=?@[\]^_``{|}~ arial.ttf Version 6.89 Arial Arial - 0123456789 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ äöüÄÖÜß !"#$%&'()*+,-./:;<=?@[\]^_``{|}~ arialbd.ttf Version 7.00 Arial Bold Arial Bold - 0123456789 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ äöüÄÖÜß !"#$%&'()*+,-./:;<=?@[\]^_``{|}~ arialbd.ttf Version 6.89 Arial Bold Arial Bold - 0123456789 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ äöüÄÖÜß !"#$%&'()*+,-./:;<=?@[\]^_``{|}~ ariali.ttf Version 7.00 Arial Italic Arial Italic - 0123456789 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ äöüÄÖÜß !"#$%&'()*+,-./:;<=?@[\]^_``{|}~ ariali.ttf Version 6.89 Arial Italic Arial Italic - 0123456789 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ äöüÄÖÜß !"#$%&'()*+,-./:;<=?@[\]^_``{|}~ arialbi.ttf Version 7.00 Arial Bold Italic Arial Bold Italic - 0123456789 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ äöüÄÖÜß !"#$%&'()*+,-./:;<=?@[\]^_``{|}~ arialbi.ttf Version 6.89 Arial Bold Italic Arial Bold Italic - 0123456789 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ äöüÄÖÜß !"#$%&'()*+,-./:;<=?@[\]^_``{|}~ arial.ttf Version 5.22 Arial Arial - 0123456789 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ äöüÄÖÜß !"#$%&'()*+,-./:;<=?@[\]^_``{|}~
[Show full text]
When It Comes to Choosing Which Font to Use for Your Resume, Less Is More
by Vault Careers | January 29, 2019 When it comes to choosing which font to use for your resume, less is more. This means you want your content to stand out, not the lettering with which you craft your content. With that in mind, here are five great fonts to consider when putting together your resume. 1. Arial This sans-serif font was created in 1982. One of its creators, Robin Nicholas, reportedly called it a "bland" and "generic" font, meaning it's perfect for your resume. It's like the gray suit of fonts. It will look just fine, while letting what's in it (what it spells out) shine. You no doubt are very familiar with this font, since it's standard on a lot of Microsoft software and applications. 2. Cambria If you prefer a serif font to a sans-serif font, give Cambria a look. It was designed (by a Dutch designer) specifically to look sharp on a computer screen, while keeping its elegance on a printed piece of paper. And since chances are your resume will be viewed on a screen, Cambria is a nice choice. Lastly, it should be noted that Cambria was supposedly created to take the place of Times New Roman (the former resume champion that is now considered, by some, to be a tad too formal for a resume, like wearing a three-piece suit to an interview). 3. Calibri This is another clean sans-serif font, like Arial, but a bit less ubiquitous. Which makes this a fashion-forward choice. Indeed, Calibri is relatively new, as it was only made public in 2007 when it appeared in Microsoft Office.
[Show full text]
Resume Basics Prep Talks Series Workshop 1
10/29/2019 Resume Basics Prep Talks Series Workshop 1 What is a Resume ? News Flash: your resume really isn’t about you. Your resume is about how you can fulfill the needs of the employer, easing their pain. 1 10/29/2019 A Resume • A resume is a one‐ or two‐page formal document. • A means of itemizing your work experience, educational background, and special skills. Sounds simple enough Contact Information Your name, phone number, professional email address, address (city, state and zip code) and LinkedIn. Beware the ATS (Applicant Tracking System) you may want to avoid putting your contact info in the header or footer of the document itself —sometimes the software that scans your resume will not see the header or footer. 2 10/29/2019 Professional Summary The professional summary is a brief, one‐ to three‐sentence section featured prominently on your resume that succinctly describes who you are, what you do and why you’re perfect for the job. Focusing on the value you could bring to a potential employer. Give recruiters and hiring managers a quick, high‐level overview of why you’re the right person for the job. Skills This use to come at the end of the resume. No more! The skills section has become more and more important as recruiters and hiring managers increasingly look for candidates with specialized backgrounds. Include technical and software competencies. Don’t hesitate to match to the position description. 3 10/29/2019 Professional Experience Detail your work history in a consistent and compelling format. Company names, locations, employment dates, roles and titles you held and most importantly, bullet points containing action verbs and data points that detail the relevant accomplishments of each position.
[Show full text]
Typography GRS Writing Group – FRI 6 JUL 2018
Typography GRS Writing Group – FRI 6 JUL 2018 Typography is the art of arranging type to make to make text legible, readable, and appealing. At UWA, the rules regarding the typography of a thesis are few. So unless your discipline follows rules provided in a specific style guide* you will need to make a number of typographical choices. You will need to decide how your text, tables and figures appear and how you can make best use of the white space that surrounds these elements. *There are many style guides available in the UWA Library, including the APA Manual, Chicago Style Guide. Even if you are not required to follow a particular style, you may find it useful to see what styles are recommended for your discipline by reading a style guide relevant to your research topic. Font While Times New Roman has been the traditional choice of font for academic writing, there are a number of equally readable fonts. Serif fonts have short lines at the upper and lower ends of the strokes of a letter and are considered easier to read when text is printed. Sans serif fonts (without the additional short lines) appear ‘cleaner’ but ‘less formal’ and are often used for onscreen material. For your thesis you may want to consider these readily available fonts: Times New Roman, Garamond, Century Schoolbook, Georgia, Minion Pro, Cambria, Calibri, Arial, Helvitica, Verdana • Given your thesis will be provided to examiners as a PDF (and the final version will be uploaded onto the UWA research repository as a PDF) you may want to consider a font that is readable both in print and on screen.
[Show full text]