:: MULTIMEDIA TOOLS :: CLASS NOTES

1

CLASS::11

11.25

2019 3 Hours

AGENDA HTML CODING YOUR HOMEPAGE [ SETTING UP SECTION TWO & FOOTER ] :: ABOUT <section id=”about”> [ <div id=”profile”> , <div id=”bio”> ] :: FOOTER <footer> [ <div id=”footer-menu”>, <img>, <span class=”copyright”>, <ul>, <li>, <a>] :: SOCIAL MEDIA ELEMENT <div id=”social”>, <a>, <img>

:: MULTIMEDIA TOOLS :: CLASS NOTES

2

PART III – CREATING THE HOMEPAGE [ About/Bio Section ]

<div id=”profile”>

<div id=”bio”> <div id=”all-about-me”>

<h1> <p> <p> <div id="social"> <a><img> <a><img>

HTML [ index.html ]

1. Create one div with the id name of “profile” 2. Create one div with the id name of “bio”

:: MULTIMEDIA TOOLS :: CLASS NOTES

3

CSS [ style.css ]

1. Create a selector for the div with unique id name of “profile”

2. Create a selector for the div with a unique id name of “bio”

3. Add the style declarations shown in the right column.

View In Browser The 2 divs should be next to one another and display different colors

ADD IMAGE TO PROFILE 1. Locate the #profile{ selector 2. ADD a background image 3. ADD background size value of cover 4. ADD background position value to your liking (X and Y axis values can be in the form of +/- number in pixels, or %s) 5. Remove the default image repeat View In Browser

:: MULTIMEDIA TOOLS :: CLASS NOTES

4

REFERENCE FOR RIGHT COLUMN ONLY

CODE FOR BIO CHILD ELEMENTS - HTML [ index.html ]

NOTE: The code below includes an anchor <a> element with the hypertext of “RESUME”. If you plan on using plain text and code to link to another page or document, please use the code below. If you plan to include social media buttons in your bio element, please substitute the <div id=”view-resume”> element with the <div id=”social”> element ( located in the instructions for coding the footer element )

:: MULTIMEDIA TOOLS :: CLASS NOTES

5

View in Browser

CODE FOR BIO CHILD ELEMENTS - CSS [ style.css ]

View in Browser

:: MULTIMEDIA TOOLS :: CLASS NOTES

6

CSS [ style.css ]

Styles for Your Bio heading & paragraphs

Styles for Your View Resume (or plain text) Button

:: MULTIMEDIA TOOLS :: CLASS NOTES

7

View in Browser

:: MULTIMEDIA TOOLS :: CLASS NOTES

8

Footer Logo, Copyright, & Menu HTML [ index.html ]

1. Locate the <footer> element 2. Inside of the footer element, ADD a new div with the unique id name of “footer-menu”

3. Inside of the <div id=”footer-menu”> element, ADD the logo image for your footer

4. AFTER the footer logo, ADD a span element with the unique id name of “copyright”

:: MULTIMEDIA TOOLS :: CLASS NOTES

9

5. AFTER the div element with the copyright, ADD an unordered list and child elements to serve as

your footer navigation. YOU MAY COPY/PASTE the existing <ul> element located in your <header>

View in Browser

STYLE THE FOOTER - CSS [ style.css ]

:: MULTIMEDIA TOOLS :: CLASS NOTES

10

STYLES [ For Following footer Layout ]: [ #footer-menu, #copyright, footer ul (unordered list) / li (list items) / a (hyperlinks) & ]

Styles for #footer-menu

Styles for logo (direct img descendant) in #footer-menu element

Styles for #copyright

Styles for Footer Navigation Menu [ ul, li, a ]

NOTE: You may add a transition to the #footer-menu ul li a{ selector

View in Browser [ SEE IMAGE AT TOP FOR REFERENCE ]

:: MULTIMEDIA TOOLS :: CLASS NOTES

11

SOCIAL MEDIA HYPERLINKS - HTML [ index.html ]

HTML PLACEMENT IN BIO

:: MULTIMEDIA TOOLS :: CLASS NOTES

12

SOCIAL MEDIA IN BIO - CSS [ #social / #social a (hyperlink element) / #social a img (clickable images) ]

:: MULTIMEDIA TOOLS :: CLASS NOTES

13

HTML PLACEMENT IN FOOTER

CENTER LAYOUT

ALTERNATE LAYOUT

SOCIAL MEDIA IN FOOTER [ CENTER LAYOUT ] - CSS

SOCIAL MEDIA IN FOOTER [ ALTERNATE LAYOUT ]- CSS

:: MULTIMEDIA TOOLS :: CLASS NOTES

14

:: MULTIMEDIA TOOLS :: CLASS NOTES

15

HW-11 Homework DUE ::12.02

REVIEW ::

1. Class Notes

2. DEV TIPS: CSS Basics (Part5) — Advanced Selectors SOURCE URL: https://youtu.be/oh2JLo2yxCM

3. DEV TIPS: CSS Basics (Part6) — Specificity SOURCE URL: https://youtu.be/fy07HYm-geM

4. DEV TIPS: CSS Basics (Part7) — CSS3 SOURCE URL: https://youtu.be/Qkx3avfK28k

5. DEV TIPS: CSS Floats and Clears Explained SOURCE URL: https://youtu.be/xFGBNv2KeVU

6. Watch HTML5 Tutorial For Beginners [ 6 of 6 ] - CSS Page Layout SOURCE URL: http://youtu.be/CPcS4HtrUEU

DO ::

• Watch CSS Videos • Ensure your code is without errors & displays well in the browser • Sketch your ideas for your remaining webpages • Bring images & videos for your remaining pages

SEE HOMEWORK PAGE FOR COMPLETE DETAILS

BRING :: HW-11

1 index.html

2 style.css

3 Sketches of Webpages

4 Images & Videos for Remaining Webpages