Fewd week1 slides
96
WILL MYERS Freelance Front End Developer SLIDES http://www.slideshare.net/wilkom/fewd-week1-slides
-
Upload
william-myers -
Category
Internet
-
view
354 -
download
0
Transcript of Fewd week1 slides
WILL MYERSFreelance Front End Developer
SLIDES
httpwwwslidesharenetwilkomfewd-week1-slides
ATOMAtom is a new-ish editor for building websites and webapplications It has a great online community and lots ofuseful free packages
For Mac OSX 108 and above For Windows 8 and above
httpsatomio
ATOM PLUGINSopen Atomgo to Preferences (Atom gt Preferences) this will launch aSettings tabselect Install from the Settings left-hand navsearch for atom-beautify and install thisdo the same for open-in-browser white-cursor andhighlight-linerestart Atom
FEWD - GITHUB BASICS
WHAT IS GITGit is software that you use to backup your files and trackchanges when writing code
It is distributed software which means it works on multiplecomputers communicating with each other
This type of software is called SCM (Software ConfigurationManagementSource Control Management) It is also calledVersion Control
HOW DOES GIT WORKgit (the program) takes a snapshot of your files at a givenmoment in time and stores a reference to this snapshot
SOME OTHER GIT TERMINOLOGYrepository - a central location (folder) in which data -typically about a project - is stored and managedclone - download data from the cloud to your localmachine (laptop computer etc)commit - save a version of your project to git
WHAT IS GITHUBGitHub is a web application (and desktop application) thatprovides a GUI (graphical user interface) to use Git
You use GitHub to make it easier to perform Git tasks onyour files - saving tracking merging cloning (copying) etc
GitHub is the market leader for Git applications It is nowcommonplace for any company that employs developers
GITHUB MAIN FEATURESMakes it easy to manage git repositoriesStores files (similar to Dropbox or Google Drive) butstores code filesStores a history of files and the changes that happened toeach fileHosts files on the cloud so you can share the finishedproduct with other people
WHY IS GITHUB VALUABLESince GitHub stores a history of the code it allowsdevelopers to go back in time if something breaksGitHub allows multiple developers to work on the sameproject (like Dropbox or GDocs for code)GitHub tracks changes so you can see who worked onwhatGitHub allows for feedback to be given on the code whichhopefully increases code quality Much like an editorupdates a Word document using Track Changes GitHuballows a similar environment
HOW WILL WE USE GITHUBThroughout this class you will use GitHub as a tool tosubmit assignments and download files GitHub will also beused to assess and review your homework and providefeedback
LETS START USING GITHUB AND GITGitHub Video Explanation
Download the zip file from this URL and extract the fileshttpbitly1jCVe9d
Mac Just double-click on the zip to extract itWin Right-click on the zip file and choose Extract here
Open the Getting_Started_With_GitHubpdf in the intro-to-gitfolder in the extracted zip
WHERE SHALL WE PUT OUR FILESLets start by making a new folder called FEWD in the userhome directory
Mac UsersltusernamegtWin CUsersltusernamegt
This is where we will put everything related to the FEWDcourse For the rest of the course Ill refer to this folder as[home]FEWD
NB If you cant find your user home directory then justcreate the FEWD folder on your Desktop
CREATE A GITHUB REPOSITORYFor our first repository you will do the following using theGitHub desktop app
Use the + button in the top-left of the app (Create tab)Create a new repository called HelloWorldChoose the [home]FEWD folder for the local pathOpen the hello_world folder in the downloaded intro-to-git folder and copy the two files into your new HelloWorldrepository folderCommit the changes and publish the repository togithubcom
CLONE A GITHUB REPOSITORYNow clone (make a local copy) of a repository on GitHub
Go to this URL on GitHub in your Chrome browser
Click on the button with an arrow on a screen (located tothe left of DOWNLOAD ZIP button)Allow the browser to launch GitHub DesktopNavigate to [home]FEWD folder in the pop-up and savethe ga-fewd-files cloned repoNow open this ga-fewd-files folder in your text editor
THIS IS WHERE I WILL PUT THE STARTER CODE FOREACH WEEKLY LESSON DO NOT WORK IN THIS REPO
httpsgithubcomwmyersga-fewd-files
YOUR WEEKLY FEWD GITHUBREPOSITORY
Use the + button in the top-left of GitHub Desktop(Create tab)Create a new repository called FEWD_Week1Choose the [home]FEWD folder for the local pathOpen this repo folder in your editorCommit the changes and publish the FEWD_Week1repository to githubcom
THIS IS WHERE YOU WILL PUT THE FILES THAT YOUWORK ON EACH WEEK
YOUR WEEKLY FEWD GITHUBREPOSITORY
Remember that you will do all your classwork andhomework in your weekly GitHub repository
You create a new repository each week named in aconsistent way
eg FEWD_Week1 FEWD_Week2 etc
YOUR WEEKLY FEWD GITHUBREPOSITORY
Each week you will be given a homework assignment Whenyou have completed the assignment you will commit thefiles and folders to the weekly created repository
You need to notify me when your homework is committedso that I can add comments to your code and grade yourwork each week
YOUR WEEKLY FEWD GITHUBREPOSITORY
When you are ready for me to review your assignments dothe following
Go to your weekly repo on githubcom eg
Open a new issue under the Issues Tab
In the title field write (eg) FEWD_Week1 AssignmentIn the comment field write wmyers assignmentcommittedNow submit the issue
httpsgithubcom[your-github-id]FEWD_Week1
httpsgithubcom[your-github-id]FEWD_Week1issues
YOUR WEEKLY FEWD GITHUBREPOSITORY
I will submit feedback each week in two ways
Comment on your code for each commit that you do forthe assignment in your weekly repoGrade your work and put the result in a new issue on yourweekly repo
FEWD - HTML BASICS
AGENDAHTML Tags amp CSS Selectors ReviewStructure Reading w UnderstandingExternal Style SheetsLab Time
HTML TAGS amp CSS SELECTORS
HTML BASICS
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
ATOMAtom is a new-ish editor for building websites and webapplications It has a great online community and lots ofuseful free packages
For Mac OSX 108 and above For Windows 8 and above
httpsatomio
ATOM PLUGINSopen Atomgo to Preferences (Atom gt Preferences) this will launch aSettings tabselect Install from the Settings left-hand navsearch for atom-beautify and install thisdo the same for open-in-browser white-cursor andhighlight-linerestart Atom
FEWD - GITHUB BASICS
WHAT IS GITGit is software that you use to backup your files and trackchanges when writing code
It is distributed software which means it works on multiplecomputers communicating with each other
This type of software is called SCM (Software ConfigurationManagementSource Control Management) It is also calledVersion Control
HOW DOES GIT WORKgit (the program) takes a snapshot of your files at a givenmoment in time and stores a reference to this snapshot
SOME OTHER GIT TERMINOLOGYrepository - a central location (folder) in which data -typically about a project - is stored and managedclone - download data from the cloud to your localmachine (laptop computer etc)commit - save a version of your project to git
WHAT IS GITHUBGitHub is a web application (and desktop application) thatprovides a GUI (graphical user interface) to use Git
You use GitHub to make it easier to perform Git tasks onyour files - saving tracking merging cloning (copying) etc
GitHub is the market leader for Git applications It is nowcommonplace for any company that employs developers
GITHUB MAIN FEATURESMakes it easy to manage git repositoriesStores files (similar to Dropbox or Google Drive) butstores code filesStores a history of files and the changes that happened toeach fileHosts files on the cloud so you can share the finishedproduct with other people
WHY IS GITHUB VALUABLESince GitHub stores a history of the code it allowsdevelopers to go back in time if something breaksGitHub allows multiple developers to work on the sameproject (like Dropbox or GDocs for code)GitHub tracks changes so you can see who worked onwhatGitHub allows for feedback to be given on the code whichhopefully increases code quality Much like an editorupdates a Word document using Track Changes GitHuballows a similar environment
HOW WILL WE USE GITHUBThroughout this class you will use GitHub as a tool tosubmit assignments and download files GitHub will also beused to assess and review your homework and providefeedback
LETS START USING GITHUB AND GITGitHub Video Explanation
Download the zip file from this URL and extract the fileshttpbitly1jCVe9d
Mac Just double-click on the zip to extract itWin Right-click on the zip file and choose Extract here
Open the Getting_Started_With_GitHubpdf in the intro-to-gitfolder in the extracted zip
WHERE SHALL WE PUT OUR FILESLets start by making a new folder called FEWD in the userhome directory
Mac UsersltusernamegtWin CUsersltusernamegt
This is where we will put everything related to the FEWDcourse For the rest of the course Ill refer to this folder as[home]FEWD
NB If you cant find your user home directory then justcreate the FEWD folder on your Desktop
CREATE A GITHUB REPOSITORYFor our first repository you will do the following using theGitHub desktop app
Use the + button in the top-left of the app (Create tab)Create a new repository called HelloWorldChoose the [home]FEWD folder for the local pathOpen the hello_world folder in the downloaded intro-to-git folder and copy the two files into your new HelloWorldrepository folderCommit the changes and publish the repository togithubcom
CLONE A GITHUB REPOSITORYNow clone (make a local copy) of a repository on GitHub
Go to this URL on GitHub in your Chrome browser
Click on the button with an arrow on a screen (located tothe left of DOWNLOAD ZIP button)Allow the browser to launch GitHub DesktopNavigate to [home]FEWD folder in the pop-up and savethe ga-fewd-files cloned repoNow open this ga-fewd-files folder in your text editor
THIS IS WHERE I WILL PUT THE STARTER CODE FOREACH WEEKLY LESSON DO NOT WORK IN THIS REPO
httpsgithubcomwmyersga-fewd-files
YOUR WEEKLY FEWD GITHUBREPOSITORY
Use the + button in the top-left of GitHub Desktop(Create tab)Create a new repository called FEWD_Week1Choose the [home]FEWD folder for the local pathOpen this repo folder in your editorCommit the changes and publish the FEWD_Week1repository to githubcom
THIS IS WHERE YOU WILL PUT THE FILES THAT YOUWORK ON EACH WEEK
YOUR WEEKLY FEWD GITHUBREPOSITORY
Remember that you will do all your classwork andhomework in your weekly GitHub repository
You create a new repository each week named in aconsistent way
eg FEWD_Week1 FEWD_Week2 etc
YOUR WEEKLY FEWD GITHUBREPOSITORY
Each week you will be given a homework assignment Whenyou have completed the assignment you will commit thefiles and folders to the weekly created repository
You need to notify me when your homework is committedso that I can add comments to your code and grade yourwork each week
YOUR WEEKLY FEWD GITHUBREPOSITORY
When you are ready for me to review your assignments dothe following
Go to your weekly repo on githubcom eg
Open a new issue under the Issues Tab
In the title field write (eg) FEWD_Week1 AssignmentIn the comment field write wmyers assignmentcommittedNow submit the issue
httpsgithubcom[your-github-id]FEWD_Week1
httpsgithubcom[your-github-id]FEWD_Week1issues
YOUR WEEKLY FEWD GITHUBREPOSITORY
I will submit feedback each week in two ways
Comment on your code for each commit that you do forthe assignment in your weekly repoGrade your work and put the result in a new issue on yourweekly repo
FEWD - HTML BASICS
AGENDAHTML Tags amp CSS Selectors ReviewStructure Reading w UnderstandingExternal Style SheetsLab Time
HTML TAGS amp CSS SELECTORS
HTML BASICS
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
ATOM PLUGINSopen Atomgo to Preferences (Atom gt Preferences) this will launch aSettings tabselect Install from the Settings left-hand navsearch for atom-beautify and install thisdo the same for open-in-browser white-cursor andhighlight-linerestart Atom
FEWD - GITHUB BASICS
WHAT IS GITGit is software that you use to backup your files and trackchanges when writing code
It is distributed software which means it works on multiplecomputers communicating with each other
This type of software is called SCM (Software ConfigurationManagementSource Control Management) It is also calledVersion Control
HOW DOES GIT WORKgit (the program) takes a snapshot of your files at a givenmoment in time and stores a reference to this snapshot
SOME OTHER GIT TERMINOLOGYrepository - a central location (folder) in which data -typically about a project - is stored and managedclone - download data from the cloud to your localmachine (laptop computer etc)commit - save a version of your project to git
WHAT IS GITHUBGitHub is a web application (and desktop application) thatprovides a GUI (graphical user interface) to use Git
You use GitHub to make it easier to perform Git tasks onyour files - saving tracking merging cloning (copying) etc
GitHub is the market leader for Git applications It is nowcommonplace for any company that employs developers
GITHUB MAIN FEATURESMakes it easy to manage git repositoriesStores files (similar to Dropbox or Google Drive) butstores code filesStores a history of files and the changes that happened toeach fileHosts files on the cloud so you can share the finishedproduct with other people
WHY IS GITHUB VALUABLESince GitHub stores a history of the code it allowsdevelopers to go back in time if something breaksGitHub allows multiple developers to work on the sameproject (like Dropbox or GDocs for code)GitHub tracks changes so you can see who worked onwhatGitHub allows for feedback to be given on the code whichhopefully increases code quality Much like an editorupdates a Word document using Track Changes GitHuballows a similar environment
HOW WILL WE USE GITHUBThroughout this class you will use GitHub as a tool tosubmit assignments and download files GitHub will also beused to assess and review your homework and providefeedback
LETS START USING GITHUB AND GITGitHub Video Explanation
Download the zip file from this URL and extract the fileshttpbitly1jCVe9d
Mac Just double-click on the zip to extract itWin Right-click on the zip file and choose Extract here
Open the Getting_Started_With_GitHubpdf in the intro-to-gitfolder in the extracted zip
WHERE SHALL WE PUT OUR FILESLets start by making a new folder called FEWD in the userhome directory
Mac UsersltusernamegtWin CUsersltusernamegt
This is where we will put everything related to the FEWDcourse For the rest of the course Ill refer to this folder as[home]FEWD
NB If you cant find your user home directory then justcreate the FEWD folder on your Desktop
CREATE A GITHUB REPOSITORYFor our first repository you will do the following using theGitHub desktop app
Use the + button in the top-left of the app (Create tab)Create a new repository called HelloWorldChoose the [home]FEWD folder for the local pathOpen the hello_world folder in the downloaded intro-to-git folder and copy the two files into your new HelloWorldrepository folderCommit the changes and publish the repository togithubcom
CLONE A GITHUB REPOSITORYNow clone (make a local copy) of a repository on GitHub
Go to this URL on GitHub in your Chrome browser
Click on the button with an arrow on a screen (located tothe left of DOWNLOAD ZIP button)Allow the browser to launch GitHub DesktopNavigate to [home]FEWD folder in the pop-up and savethe ga-fewd-files cloned repoNow open this ga-fewd-files folder in your text editor
THIS IS WHERE I WILL PUT THE STARTER CODE FOREACH WEEKLY LESSON DO NOT WORK IN THIS REPO
httpsgithubcomwmyersga-fewd-files
YOUR WEEKLY FEWD GITHUBREPOSITORY
Use the + button in the top-left of GitHub Desktop(Create tab)Create a new repository called FEWD_Week1Choose the [home]FEWD folder for the local pathOpen this repo folder in your editorCommit the changes and publish the FEWD_Week1repository to githubcom
THIS IS WHERE YOU WILL PUT THE FILES THAT YOUWORK ON EACH WEEK
YOUR WEEKLY FEWD GITHUBREPOSITORY
Remember that you will do all your classwork andhomework in your weekly GitHub repository
You create a new repository each week named in aconsistent way
eg FEWD_Week1 FEWD_Week2 etc
YOUR WEEKLY FEWD GITHUBREPOSITORY
Each week you will be given a homework assignment Whenyou have completed the assignment you will commit thefiles and folders to the weekly created repository
You need to notify me when your homework is committedso that I can add comments to your code and grade yourwork each week
YOUR WEEKLY FEWD GITHUBREPOSITORY
When you are ready for me to review your assignments dothe following
Go to your weekly repo on githubcom eg
Open a new issue under the Issues Tab
In the title field write (eg) FEWD_Week1 AssignmentIn the comment field write wmyers assignmentcommittedNow submit the issue
httpsgithubcom[your-github-id]FEWD_Week1
httpsgithubcom[your-github-id]FEWD_Week1issues
YOUR WEEKLY FEWD GITHUBREPOSITORY
I will submit feedback each week in two ways
Comment on your code for each commit that you do forthe assignment in your weekly repoGrade your work and put the result in a new issue on yourweekly repo
FEWD - HTML BASICS
AGENDAHTML Tags amp CSS Selectors ReviewStructure Reading w UnderstandingExternal Style SheetsLab Time
HTML TAGS amp CSS SELECTORS
HTML BASICS
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
FEWD - GITHUB BASICS
WHAT IS GITGit is software that you use to backup your files and trackchanges when writing code
It is distributed software which means it works on multiplecomputers communicating with each other
This type of software is called SCM (Software ConfigurationManagementSource Control Management) It is also calledVersion Control
HOW DOES GIT WORKgit (the program) takes a snapshot of your files at a givenmoment in time and stores a reference to this snapshot
SOME OTHER GIT TERMINOLOGYrepository - a central location (folder) in which data -typically about a project - is stored and managedclone - download data from the cloud to your localmachine (laptop computer etc)commit - save a version of your project to git
WHAT IS GITHUBGitHub is a web application (and desktop application) thatprovides a GUI (graphical user interface) to use Git
You use GitHub to make it easier to perform Git tasks onyour files - saving tracking merging cloning (copying) etc
GitHub is the market leader for Git applications It is nowcommonplace for any company that employs developers
GITHUB MAIN FEATURESMakes it easy to manage git repositoriesStores files (similar to Dropbox or Google Drive) butstores code filesStores a history of files and the changes that happened toeach fileHosts files on the cloud so you can share the finishedproduct with other people
WHY IS GITHUB VALUABLESince GitHub stores a history of the code it allowsdevelopers to go back in time if something breaksGitHub allows multiple developers to work on the sameproject (like Dropbox or GDocs for code)GitHub tracks changes so you can see who worked onwhatGitHub allows for feedback to be given on the code whichhopefully increases code quality Much like an editorupdates a Word document using Track Changes GitHuballows a similar environment
HOW WILL WE USE GITHUBThroughout this class you will use GitHub as a tool tosubmit assignments and download files GitHub will also beused to assess and review your homework and providefeedback
LETS START USING GITHUB AND GITGitHub Video Explanation
Download the zip file from this URL and extract the fileshttpbitly1jCVe9d
Mac Just double-click on the zip to extract itWin Right-click on the zip file and choose Extract here
Open the Getting_Started_With_GitHubpdf in the intro-to-gitfolder in the extracted zip
WHERE SHALL WE PUT OUR FILESLets start by making a new folder called FEWD in the userhome directory
Mac UsersltusernamegtWin CUsersltusernamegt
This is where we will put everything related to the FEWDcourse For the rest of the course Ill refer to this folder as[home]FEWD
NB If you cant find your user home directory then justcreate the FEWD folder on your Desktop
CREATE A GITHUB REPOSITORYFor our first repository you will do the following using theGitHub desktop app
Use the + button in the top-left of the app (Create tab)Create a new repository called HelloWorldChoose the [home]FEWD folder for the local pathOpen the hello_world folder in the downloaded intro-to-git folder and copy the two files into your new HelloWorldrepository folderCommit the changes and publish the repository togithubcom
CLONE A GITHUB REPOSITORYNow clone (make a local copy) of a repository on GitHub
Go to this URL on GitHub in your Chrome browser
Click on the button with an arrow on a screen (located tothe left of DOWNLOAD ZIP button)Allow the browser to launch GitHub DesktopNavigate to [home]FEWD folder in the pop-up and savethe ga-fewd-files cloned repoNow open this ga-fewd-files folder in your text editor
THIS IS WHERE I WILL PUT THE STARTER CODE FOREACH WEEKLY LESSON DO NOT WORK IN THIS REPO
httpsgithubcomwmyersga-fewd-files
YOUR WEEKLY FEWD GITHUBREPOSITORY
Use the + button in the top-left of GitHub Desktop(Create tab)Create a new repository called FEWD_Week1Choose the [home]FEWD folder for the local pathOpen this repo folder in your editorCommit the changes and publish the FEWD_Week1repository to githubcom
THIS IS WHERE YOU WILL PUT THE FILES THAT YOUWORK ON EACH WEEK
YOUR WEEKLY FEWD GITHUBREPOSITORY
Remember that you will do all your classwork andhomework in your weekly GitHub repository
You create a new repository each week named in aconsistent way
eg FEWD_Week1 FEWD_Week2 etc
YOUR WEEKLY FEWD GITHUBREPOSITORY
Each week you will be given a homework assignment Whenyou have completed the assignment you will commit thefiles and folders to the weekly created repository
You need to notify me when your homework is committedso that I can add comments to your code and grade yourwork each week
YOUR WEEKLY FEWD GITHUBREPOSITORY
When you are ready for me to review your assignments dothe following
Go to your weekly repo on githubcom eg
Open a new issue under the Issues Tab
In the title field write (eg) FEWD_Week1 AssignmentIn the comment field write wmyers assignmentcommittedNow submit the issue
httpsgithubcom[your-github-id]FEWD_Week1
httpsgithubcom[your-github-id]FEWD_Week1issues
YOUR WEEKLY FEWD GITHUBREPOSITORY
I will submit feedback each week in two ways
Comment on your code for each commit that you do forthe assignment in your weekly repoGrade your work and put the result in a new issue on yourweekly repo
FEWD - HTML BASICS
AGENDAHTML Tags amp CSS Selectors ReviewStructure Reading w UnderstandingExternal Style SheetsLab Time
HTML TAGS amp CSS SELECTORS
HTML BASICS
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
WHAT IS GITGit is software that you use to backup your files and trackchanges when writing code
It is distributed software which means it works on multiplecomputers communicating with each other
This type of software is called SCM (Software ConfigurationManagementSource Control Management) It is also calledVersion Control
HOW DOES GIT WORKgit (the program) takes a snapshot of your files at a givenmoment in time and stores a reference to this snapshot
SOME OTHER GIT TERMINOLOGYrepository - a central location (folder) in which data -typically about a project - is stored and managedclone - download data from the cloud to your localmachine (laptop computer etc)commit - save a version of your project to git
WHAT IS GITHUBGitHub is a web application (and desktop application) thatprovides a GUI (graphical user interface) to use Git
You use GitHub to make it easier to perform Git tasks onyour files - saving tracking merging cloning (copying) etc
GitHub is the market leader for Git applications It is nowcommonplace for any company that employs developers
GITHUB MAIN FEATURESMakes it easy to manage git repositoriesStores files (similar to Dropbox or Google Drive) butstores code filesStores a history of files and the changes that happened toeach fileHosts files on the cloud so you can share the finishedproduct with other people
WHY IS GITHUB VALUABLESince GitHub stores a history of the code it allowsdevelopers to go back in time if something breaksGitHub allows multiple developers to work on the sameproject (like Dropbox or GDocs for code)GitHub tracks changes so you can see who worked onwhatGitHub allows for feedback to be given on the code whichhopefully increases code quality Much like an editorupdates a Word document using Track Changes GitHuballows a similar environment
HOW WILL WE USE GITHUBThroughout this class you will use GitHub as a tool tosubmit assignments and download files GitHub will also beused to assess and review your homework and providefeedback
LETS START USING GITHUB AND GITGitHub Video Explanation
Download the zip file from this URL and extract the fileshttpbitly1jCVe9d
Mac Just double-click on the zip to extract itWin Right-click on the zip file and choose Extract here
Open the Getting_Started_With_GitHubpdf in the intro-to-gitfolder in the extracted zip
WHERE SHALL WE PUT OUR FILESLets start by making a new folder called FEWD in the userhome directory
Mac UsersltusernamegtWin CUsersltusernamegt
This is where we will put everything related to the FEWDcourse For the rest of the course Ill refer to this folder as[home]FEWD
NB If you cant find your user home directory then justcreate the FEWD folder on your Desktop
CREATE A GITHUB REPOSITORYFor our first repository you will do the following using theGitHub desktop app
Use the + button in the top-left of the app (Create tab)Create a new repository called HelloWorldChoose the [home]FEWD folder for the local pathOpen the hello_world folder in the downloaded intro-to-git folder and copy the two files into your new HelloWorldrepository folderCommit the changes and publish the repository togithubcom
CLONE A GITHUB REPOSITORYNow clone (make a local copy) of a repository on GitHub
Go to this URL on GitHub in your Chrome browser
Click on the button with an arrow on a screen (located tothe left of DOWNLOAD ZIP button)Allow the browser to launch GitHub DesktopNavigate to [home]FEWD folder in the pop-up and savethe ga-fewd-files cloned repoNow open this ga-fewd-files folder in your text editor
THIS IS WHERE I WILL PUT THE STARTER CODE FOREACH WEEKLY LESSON DO NOT WORK IN THIS REPO
httpsgithubcomwmyersga-fewd-files
YOUR WEEKLY FEWD GITHUBREPOSITORY
Use the + button in the top-left of GitHub Desktop(Create tab)Create a new repository called FEWD_Week1Choose the [home]FEWD folder for the local pathOpen this repo folder in your editorCommit the changes and publish the FEWD_Week1repository to githubcom
THIS IS WHERE YOU WILL PUT THE FILES THAT YOUWORK ON EACH WEEK
YOUR WEEKLY FEWD GITHUBREPOSITORY
Remember that you will do all your classwork andhomework in your weekly GitHub repository
You create a new repository each week named in aconsistent way
eg FEWD_Week1 FEWD_Week2 etc
YOUR WEEKLY FEWD GITHUBREPOSITORY
Each week you will be given a homework assignment Whenyou have completed the assignment you will commit thefiles and folders to the weekly created repository
You need to notify me when your homework is committedso that I can add comments to your code and grade yourwork each week
YOUR WEEKLY FEWD GITHUBREPOSITORY
When you are ready for me to review your assignments dothe following
Go to your weekly repo on githubcom eg
Open a new issue under the Issues Tab
In the title field write (eg) FEWD_Week1 AssignmentIn the comment field write wmyers assignmentcommittedNow submit the issue
httpsgithubcom[your-github-id]FEWD_Week1
httpsgithubcom[your-github-id]FEWD_Week1issues
YOUR WEEKLY FEWD GITHUBREPOSITORY
I will submit feedback each week in two ways
Comment on your code for each commit that you do forthe assignment in your weekly repoGrade your work and put the result in a new issue on yourweekly repo
FEWD - HTML BASICS
AGENDAHTML Tags amp CSS Selectors ReviewStructure Reading w UnderstandingExternal Style SheetsLab Time
HTML TAGS amp CSS SELECTORS
HTML BASICS
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
HOW DOES GIT WORKgit (the program) takes a snapshot of your files at a givenmoment in time and stores a reference to this snapshot
SOME OTHER GIT TERMINOLOGYrepository - a central location (folder) in which data -typically about a project - is stored and managedclone - download data from the cloud to your localmachine (laptop computer etc)commit - save a version of your project to git
WHAT IS GITHUBGitHub is a web application (and desktop application) thatprovides a GUI (graphical user interface) to use Git
You use GitHub to make it easier to perform Git tasks onyour files - saving tracking merging cloning (copying) etc
GitHub is the market leader for Git applications It is nowcommonplace for any company that employs developers
GITHUB MAIN FEATURESMakes it easy to manage git repositoriesStores files (similar to Dropbox or Google Drive) butstores code filesStores a history of files and the changes that happened toeach fileHosts files on the cloud so you can share the finishedproduct with other people
WHY IS GITHUB VALUABLESince GitHub stores a history of the code it allowsdevelopers to go back in time if something breaksGitHub allows multiple developers to work on the sameproject (like Dropbox or GDocs for code)GitHub tracks changes so you can see who worked onwhatGitHub allows for feedback to be given on the code whichhopefully increases code quality Much like an editorupdates a Word document using Track Changes GitHuballows a similar environment
HOW WILL WE USE GITHUBThroughout this class you will use GitHub as a tool tosubmit assignments and download files GitHub will also beused to assess and review your homework and providefeedback
LETS START USING GITHUB AND GITGitHub Video Explanation
Download the zip file from this URL and extract the fileshttpbitly1jCVe9d
Mac Just double-click on the zip to extract itWin Right-click on the zip file and choose Extract here
Open the Getting_Started_With_GitHubpdf in the intro-to-gitfolder in the extracted zip
WHERE SHALL WE PUT OUR FILESLets start by making a new folder called FEWD in the userhome directory
Mac UsersltusernamegtWin CUsersltusernamegt
This is where we will put everything related to the FEWDcourse For the rest of the course Ill refer to this folder as[home]FEWD
NB If you cant find your user home directory then justcreate the FEWD folder on your Desktop
CREATE A GITHUB REPOSITORYFor our first repository you will do the following using theGitHub desktop app
Use the + button in the top-left of the app (Create tab)Create a new repository called HelloWorldChoose the [home]FEWD folder for the local pathOpen the hello_world folder in the downloaded intro-to-git folder and copy the two files into your new HelloWorldrepository folderCommit the changes and publish the repository togithubcom
CLONE A GITHUB REPOSITORYNow clone (make a local copy) of a repository on GitHub
Go to this URL on GitHub in your Chrome browser
Click on the button with an arrow on a screen (located tothe left of DOWNLOAD ZIP button)Allow the browser to launch GitHub DesktopNavigate to [home]FEWD folder in the pop-up and savethe ga-fewd-files cloned repoNow open this ga-fewd-files folder in your text editor
THIS IS WHERE I WILL PUT THE STARTER CODE FOREACH WEEKLY LESSON DO NOT WORK IN THIS REPO
httpsgithubcomwmyersga-fewd-files
YOUR WEEKLY FEWD GITHUBREPOSITORY
Use the + button in the top-left of GitHub Desktop(Create tab)Create a new repository called FEWD_Week1Choose the [home]FEWD folder for the local pathOpen this repo folder in your editorCommit the changes and publish the FEWD_Week1repository to githubcom
THIS IS WHERE YOU WILL PUT THE FILES THAT YOUWORK ON EACH WEEK
YOUR WEEKLY FEWD GITHUBREPOSITORY
Remember that you will do all your classwork andhomework in your weekly GitHub repository
You create a new repository each week named in aconsistent way
eg FEWD_Week1 FEWD_Week2 etc
YOUR WEEKLY FEWD GITHUBREPOSITORY
Each week you will be given a homework assignment Whenyou have completed the assignment you will commit thefiles and folders to the weekly created repository
You need to notify me when your homework is committedso that I can add comments to your code and grade yourwork each week
YOUR WEEKLY FEWD GITHUBREPOSITORY
When you are ready for me to review your assignments dothe following
Go to your weekly repo on githubcom eg
Open a new issue under the Issues Tab
In the title field write (eg) FEWD_Week1 AssignmentIn the comment field write wmyers assignmentcommittedNow submit the issue
httpsgithubcom[your-github-id]FEWD_Week1
httpsgithubcom[your-github-id]FEWD_Week1issues
YOUR WEEKLY FEWD GITHUBREPOSITORY
I will submit feedback each week in two ways
Comment on your code for each commit that you do forthe assignment in your weekly repoGrade your work and put the result in a new issue on yourweekly repo
FEWD - HTML BASICS
AGENDAHTML Tags amp CSS Selectors ReviewStructure Reading w UnderstandingExternal Style SheetsLab Time
HTML TAGS amp CSS SELECTORS
HTML BASICS
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
SOME OTHER GIT TERMINOLOGYrepository - a central location (folder) in which data -typically about a project - is stored and managedclone - download data from the cloud to your localmachine (laptop computer etc)commit - save a version of your project to git
WHAT IS GITHUBGitHub is a web application (and desktop application) thatprovides a GUI (graphical user interface) to use Git
You use GitHub to make it easier to perform Git tasks onyour files - saving tracking merging cloning (copying) etc
GitHub is the market leader for Git applications It is nowcommonplace for any company that employs developers
GITHUB MAIN FEATURESMakes it easy to manage git repositoriesStores files (similar to Dropbox or Google Drive) butstores code filesStores a history of files and the changes that happened toeach fileHosts files on the cloud so you can share the finishedproduct with other people
WHY IS GITHUB VALUABLESince GitHub stores a history of the code it allowsdevelopers to go back in time if something breaksGitHub allows multiple developers to work on the sameproject (like Dropbox or GDocs for code)GitHub tracks changes so you can see who worked onwhatGitHub allows for feedback to be given on the code whichhopefully increases code quality Much like an editorupdates a Word document using Track Changes GitHuballows a similar environment
HOW WILL WE USE GITHUBThroughout this class you will use GitHub as a tool tosubmit assignments and download files GitHub will also beused to assess and review your homework and providefeedback
LETS START USING GITHUB AND GITGitHub Video Explanation
Download the zip file from this URL and extract the fileshttpbitly1jCVe9d
Mac Just double-click on the zip to extract itWin Right-click on the zip file and choose Extract here
Open the Getting_Started_With_GitHubpdf in the intro-to-gitfolder in the extracted zip
WHERE SHALL WE PUT OUR FILESLets start by making a new folder called FEWD in the userhome directory
Mac UsersltusernamegtWin CUsersltusernamegt
This is where we will put everything related to the FEWDcourse For the rest of the course Ill refer to this folder as[home]FEWD
NB If you cant find your user home directory then justcreate the FEWD folder on your Desktop
CREATE A GITHUB REPOSITORYFor our first repository you will do the following using theGitHub desktop app
Use the + button in the top-left of the app (Create tab)Create a new repository called HelloWorldChoose the [home]FEWD folder for the local pathOpen the hello_world folder in the downloaded intro-to-git folder and copy the two files into your new HelloWorldrepository folderCommit the changes and publish the repository togithubcom
CLONE A GITHUB REPOSITORYNow clone (make a local copy) of a repository on GitHub
Go to this URL on GitHub in your Chrome browser
Click on the button with an arrow on a screen (located tothe left of DOWNLOAD ZIP button)Allow the browser to launch GitHub DesktopNavigate to [home]FEWD folder in the pop-up and savethe ga-fewd-files cloned repoNow open this ga-fewd-files folder in your text editor
THIS IS WHERE I WILL PUT THE STARTER CODE FOREACH WEEKLY LESSON DO NOT WORK IN THIS REPO
httpsgithubcomwmyersga-fewd-files
YOUR WEEKLY FEWD GITHUBREPOSITORY
Use the + button in the top-left of GitHub Desktop(Create tab)Create a new repository called FEWD_Week1Choose the [home]FEWD folder for the local pathOpen this repo folder in your editorCommit the changes and publish the FEWD_Week1repository to githubcom
THIS IS WHERE YOU WILL PUT THE FILES THAT YOUWORK ON EACH WEEK
YOUR WEEKLY FEWD GITHUBREPOSITORY
Remember that you will do all your classwork andhomework in your weekly GitHub repository
You create a new repository each week named in aconsistent way
eg FEWD_Week1 FEWD_Week2 etc
YOUR WEEKLY FEWD GITHUBREPOSITORY
Each week you will be given a homework assignment Whenyou have completed the assignment you will commit thefiles and folders to the weekly created repository
You need to notify me when your homework is committedso that I can add comments to your code and grade yourwork each week
YOUR WEEKLY FEWD GITHUBREPOSITORY
When you are ready for me to review your assignments dothe following
Go to your weekly repo on githubcom eg
Open a new issue under the Issues Tab
In the title field write (eg) FEWD_Week1 AssignmentIn the comment field write wmyers assignmentcommittedNow submit the issue
httpsgithubcom[your-github-id]FEWD_Week1
httpsgithubcom[your-github-id]FEWD_Week1issues
YOUR WEEKLY FEWD GITHUBREPOSITORY
I will submit feedback each week in two ways
Comment on your code for each commit that you do forthe assignment in your weekly repoGrade your work and put the result in a new issue on yourweekly repo
FEWD - HTML BASICS
AGENDAHTML Tags amp CSS Selectors ReviewStructure Reading w UnderstandingExternal Style SheetsLab Time
HTML TAGS amp CSS SELECTORS
HTML BASICS
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
WHAT IS GITHUBGitHub is a web application (and desktop application) thatprovides a GUI (graphical user interface) to use Git
You use GitHub to make it easier to perform Git tasks onyour files - saving tracking merging cloning (copying) etc
GitHub is the market leader for Git applications It is nowcommonplace for any company that employs developers
GITHUB MAIN FEATURESMakes it easy to manage git repositoriesStores files (similar to Dropbox or Google Drive) butstores code filesStores a history of files and the changes that happened toeach fileHosts files on the cloud so you can share the finishedproduct with other people
WHY IS GITHUB VALUABLESince GitHub stores a history of the code it allowsdevelopers to go back in time if something breaksGitHub allows multiple developers to work on the sameproject (like Dropbox or GDocs for code)GitHub tracks changes so you can see who worked onwhatGitHub allows for feedback to be given on the code whichhopefully increases code quality Much like an editorupdates a Word document using Track Changes GitHuballows a similar environment
HOW WILL WE USE GITHUBThroughout this class you will use GitHub as a tool tosubmit assignments and download files GitHub will also beused to assess and review your homework and providefeedback
LETS START USING GITHUB AND GITGitHub Video Explanation
Download the zip file from this URL and extract the fileshttpbitly1jCVe9d
Mac Just double-click on the zip to extract itWin Right-click on the zip file and choose Extract here
Open the Getting_Started_With_GitHubpdf in the intro-to-gitfolder in the extracted zip
WHERE SHALL WE PUT OUR FILESLets start by making a new folder called FEWD in the userhome directory
Mac UsersltusernamegtWin CUsersltusernamegt
This is where we will put everything related to the FEWDcourse For the rest of the course Ill refer to this folder as[home]FEWD
NB If you cant find your user home directory then justcreate the FEWD folder on your Desktop
CREATE A GITHUB REPOSITORYFor our first repository you will do the following using theGitHub desktop app
Use the + button in the top-left of the app (Create tab)Create a new repository called HelloWorldChoose the [home]FEWD folder for the local pathOpen the hello_world folder in the downloaded intro-to-git folder and copy the two files into your new HelloWorldrepository folderCommit the changes and publish the repository togithubcom
CLONE A GITHUB REPOSITORYNow clone (make a local copy) of a repository on GitHub
Go to this URL on GitHub in your Chrome browser
Click on the button with an arrow on a screen (located tothe left of DOWNLOAD ZIP button)Allow the browser to launch GitHub DesktopNavigate to [home]FEWD folder in the pop-up and savethe ga-fewd-files cloned repoNow open this ga-fewd-files folder in your text editor
THIS IS WHERE I WILL PUT THE STARTER CODE FOREACH WEEKLY LESSON DO NOT WORK IN THIS REPO
httpsgithubcomwmyersga-fewd-files
YOUR WEEKLY FEWD GITHUBREPOSITORY
Use the + button in the top-left of GitHub Desktop(Create tab)Create a new repository called FEWD_Week1Choose the [home]FEWD folder for the local pathOpen this repo folder in your editorCommit the changes and publish the FEWD_Week1repository to githubcom
THIS IS WHERE YOU WILL PUT THE FILES THAT YOUWORK ON EACH WEEK
YOUR WEEKLY FEWD GITHUBREPOSITORY
Remember that you will do all your classwork andhomework in your weekly GitHub repository
You create a new repository each week named in aconsistent way
eg FEWD_Week1 FEWD_Week2 etc
YOUR WEEKLY FEWD GITHUBREPOSITORY
Each week you will be given a homework assignment Whenyou have completed the assignment you will commit thefiles and folders to the weekly created repository
You need to notify me when your homework is committedso that I can add comments to your code and grade yourwork each week
YOUR WEEKLY FEWD GITHUBREPOSITORY
When you are ready for me to review your assignments dothe following
Go to your weekly repo on githubcom eg
Open a new issue under the Issues Tab
In the title field write (eg) FEWD_Week1 AssignmentIn the comment field write wmyers assignmentcommittedNow submit the issue
httpsgithubcom[your-github-id]FEWD_Week1
httpsgithubcom[your-github-id]FEWD_Week1issues
YOUR WEEKLY FEWD GITHUBREPOSITORY
I will submit feedback each week in two ways
Comment on your code for each commit that you do forthe assignment in your weekly repoGrade your work and put the result in a new issue on yourweekly repo
FEWD - HTML BASICS
AGENDAHTML Tags amp CSS Selectors ReviewStructure Reading w UnderstandingExternal Style SheetsLab Time
HTML TAGS amp CSS SELECTORS
HTML BASICS
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
GITHUB MAIN FEATURESMakes it easy to manage git repositoriesStores files (similar to Dropbox or Google Drive) butstores code filesStores a history of files and the changes that happened toeach fileHosts files on the cloud so you can share the finishedproduct with other people
WHY IS GITHUB VALUABLESince GitHub stores a history of the code it allowsdevelopers to go back in time if something breaksGitHub allows multiple developers to work on the sameproject (like Dropbox or GDocs for code)GitHub tracks changes so you can see who worked onwhatGitHub allows for feedback to be given on the code whichhopefully increases code quality Much like an editorupdates a Word document using Track Changes GitHuballows a similar environment
HOW WILL WE USE GITHUBThroughout this class you will use GitHub as a tool tosubmit assignments and download files GitHub will also beused to assess and review your homework and providefeedback
LETS START USING GITHUB AND GITGitHub Video Explanation
Download the zip file from this URL and extract the fileshttpbitly1jCVe9d
Mac Just double-click on the zip to extract itWin Right-click on the zip file and choose Extract here
Open the Getting_Started_With_GitHubpdf in the intro-to-gitfolder in the extracted zip
WHERE SHALL WE PUT OUR FILESLets start by making a new folder called FEWD in the userhome directory
Mac UsersltusernamegtWin CUsersltusernamegt
This is where we will put everything related to the FEWDcourse For the rest of the course Ill refer to this folder as[home]FEWD
NB If you cant find your user home directory then justcreate the FEWD folder on your Desktop
CREATE A GITHUB REPOSITORYFor our first repository you will do the following using theGitHub desktop app
Use the + button in the top-left of the app (Create tab)Create a new repository called HelloWorldChoose the [home]FEWD folder for the local pathOpen the hello_world folder in the downloaded intro-to-git folder and copy the two files into your new HelloWorldrepository folderCommit the changes and publish the repository togithubcom
CLONE A GITHUB REPOSITORYNow clone (make a local copy) of a repository on GitHub
Go to this URL on GitHub in your Chrome browser
Click on the button with an arrow on a screen (located tothe left of DOWNLOAD ZIP button)Allow the browser to launch GitHub DesktopNavigate to [home]FEWD folder in the pop-up and savethe ga-fewd-files cloned repoNow open this ga-fewd-files folder in your text editor
THIS IS WHERE I WILL PUT THE STARTER CODE FOREACH WEEKLY LESSON DO NOT WORK IN THIS REPO
httpsgithubcomwmyersga-fewd-files
YOUR WEEKLY FEWD GITHUBREPOSITORY
Use the + button in the top-left of GitHub Desktop(Create tab)Create a new repository called FEWD_Week1Choose the [home]FEWD folder for the local pathOpen this repo folder in your editorCommit the changes and publish the FEWD_Week1repository to githubcom
THIS IS WHERE YOU WILL PUT THE FILES THAT YOUWORK ON EACH WEEK
YOUR WEEKLY FEWD GITHUBREPOSITORY
Remember that you will do all your classwork andhomework in your weekly GitHub repository
You create a new repository each week named in aconsistent way
eg FEWD_Week1 FEWD_Week2 etc
YOUR WEEKLY FEWD GITHUBREPOSITORY
Each week you will be given a homework assignment Whenyou have completed the assignment you will commit thefiles and folders to the weekly created repository
You need to notify me when your homework is committedso that I can add comments to your code and grade yourwork each week
YOUR WEEKLY FEWD GITHUBREPOSITORY
When you are ready for me to review your assignments dothe following
Go to your weekly repo on githubcom eg
Open a new issue under the Issues Tab
In the title field write (eg) FEWD_Week1 AssignmentIn the comment field write wmyers assignmentcommittedNow submit the issue
httpsgithubcom[your-github-id]FEWD_Week1
httpsgithubcom[your-github-id]FEWD_Week1issues
YOUR WEEKLY FEWD GITHUBREPOSITORY
I will submit feedback each week in two ways
Comment on your code for each commit that you do forthe assignment in your weekly repoGrade your work and put the result in a new issue on yourweekly repo
FEWD - HTML BASICS
AGENDAHTML Tags amp CSS Selectors ReviewStructure Reading w UnderstandingExternal Style SheetsLab Time
HTML TAGS amp CSS SELECTORS
HTML BASICS
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
WHY IS GITHUB VALUABLESince GitHub stores a history of the code it allowsdevelopers to go back in time if something breaksGitHub allows multiple developers to work on the sameproject (like Dropbox or GDocs for code)GitHub tracks changes so you can see who worked onwhatGitHub allows for feedback to be given on the code whichhopefully increases code quality Much like an editorupdates a Word document using Track Changes GitHuballows a similar environment
HOW WILL WE USE GITHUBThroughout this class you will use GitHub as a tool tosubmit assignments and download files GitHub will also beused to assess and review your homework and providefeedback
LETS START USING GITHUB AND GITGitHub Video Explanation
Download the zip file from this URL and extract the fileshttpbitly1jCVe9d
Mac Just double-click on the zip to extract itWin Right-click on the zip file and choose Extract here
Open the Getting_Started_With_GitHubpdf in the intro-to-gitfolder in the extracted zip
WHERE SHALL WE PUT OUR FILESLets start by making a new folder called FEWD in the userhome directory
Mac UsersltusernamegtWin CUsersltusernamegt
This is where we will put everything related to the FEWDcourse For the rest of the course Ill refer to this folder as[home]FEWD
NB If you cant find your user home directory then justcreate the FEWD folder on your Desktop
CREATE A GITHUB REPOSITORYFor our first repository you will do the following using theGitHub desktop app
Use the + button in the top-left of the app (Create tab)Create a new repository called HelloWorldChoose the [home]FEWD folder for the local pathOpen the hello_world folder in the downloaded intro-to-git folder and copy the two files into your new HelloWorldrepository folderCommit the changes and publish the repository togithubcom
CLONE A GITHUB REPOSITORYNow clone (make a local copy) of a repository on GitHub
Go to this URL on GitHub in your Chrome browser
Click on the button with an arrow on a screen (located tothe left of DOWNLOAD ZIP button)Allow the browser to launch GitHub DesktopNavigate to [home]FEWD folder in the pop-up and savethe ga-fewd-files cloned repoNow open this ga-fewd-files folder in your text editor
THIS IS WHERE I WILL PUT THE STARTER CODE FOREACH WEEKLY LESSON DO NOT WORK IN THIS REPO
httpsgithubcomwmyersga-fewd-files
YOUR WEEKLY FEWD GITHUBREPOSITORY
Use the + button in the top-left of GitHub Desktop(Create tab)Create a new repository called FEWD_Week1Choose the [home]FEWD folder for the local pathOpen this repo folder in your editorCommit the changes and publish the FEWD_Week1repository to githubcom
THIS IS WHERE YOU WILL PUT THE FILES THAT YOUWORK ON EACH WEEK
YOUR WEEKLY FEWD GITHUBREPOSITORY
Remember that you will do all your classwork andhomework in your weekly GitHub repository
You create a new repository each week named in aconsistent way
eg FEWD_Week1 FEWD_Week2 etc
YOUR WEEKLY FEWD GITHUBREPOSITORY
Each week you will be given a homework assignment Whenyou have completed the assignment you will commit thefiles and folders to the weekly created repository
You need to notify me when your homework is committedso that I can add comments to your code and grade yourwork each week
YOUR WEEKLY FEWD GITHUBREPOSITORY
When you are ready for me to review your assignments dothe following
Go to your weekly repo on githubcom eg
Open a new issue under the Issues Tab
In the title field write (eg) FEWD_Week1 AssignmentIn the comment field write wmyers assignmentcommittedNow submit the issue
httpsgithubcom[your-github-id]FEWD_Week1
httpsgithubcom[your-github-id]FEWD_Week1issues
YOUR WEEKLY FEWD GITHUBREPOSITORY
I will submit feedback each week in two ways
Comment on your code for each commit that you do forthe assignment in your weekly repoGrade your work and put the result in a new issue on yourweekly repo
FEWD - HTML BASICS
AGENDAHTML Tags amp CSS Selectors ReviewStructure Reading w UnderstandingExternal Style SheetsLab Time
HTML TAGS amp CSS SELECTORS
HTML BASICS
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
HOW WILL WE USE GITHUBThroughout this class you will use GitHub as a tool tosubmit assignments and download files GitHub will also beused to assess and review your homework and providefeedback
LETS START USING GITHUB AND GITGitHub Video Explanation
Download the zip file from this URL and extract the fileshttpbitly1jCVe9d
Mac Just double-click on the zip to extract itWin Right-click on the zip file and choose Extract here
Open the Getting_Started_With_GitHubpdf in the intro-to-gitfolder in the extracted zip
WHERE SHALL WE PUT OUR FILESLets start by making a new folder called FEWD in the userhome directory
Mac UsersltusernamegtWin CUsersltusernamegt
This is where we will put everything related to the FEWDcourse For the rest of the course Ill refer to this folder as[home]FEWD
NB If you cant find your user home directory then justcreate the FEWD folder on your Desktop
CREATE A GITHUB REPOSITORYFor our first repository you will do the following using theGitHub desktop app
Use the + button in the top-left of the app (Create tab)Create a new repository called HelloWorldChoose the [home]FEWD folder for the local pathOpen the hello_world folder in the downloaded intro-to-git folder and copy the two files into your new HelloWorldrepository folderCommit the changes and publish the repository togithubcom
CLONE A GITHUB REPOSITORYNow clone (make a local copy) of a repository on GitHub
Go to this URL on GitHub in your Chrome browser
Click on the button with an arrow on a screen (located tothe left of DOWNLOAD ZIP button)Allow the browser to launch GitHub DesktopNavigate to [home]FEWD folder in the pop-up and savethe ga-fewd-files cloned repoNow open this ga-fewd-files folder in your text editor
THIS IS WHERE I WILL PUT THE STARTER CODE FOREACH WEEKLY LESSON DO NOT WORK IN THIS REPO
httpsgithubcomwmyersga-fewd-files
YOUR WEEKLY FEWD GITHUBREPOSITORY
Use the + button in the top-left of GitHub Desktop(Create tab)Create a new repository called FEWD_Week1Choose the [home]FEWD folder for the local pathOpen this repo folder in your editorCommit the changes and publish the FEWD_Week1repository to githubcom
THIS IS WHERE YOU WILL PUT THE FILES THAT YOUWORK ON EACH WEEK
YOUR WEEKLY FEWD GITHUBREPOSITORY
Remember that you will do all your classwork andhomework in your weekly GitHub repository
You create a new repository each week named in aconsistent way
eg FEWD_Week1 FEWD_Week2 etc
YOUR WEEKLY FEWD GITHUBREPOSITORY
Each week you will be given a homework assignment Whenyou have completed the assignment you will commit thefiles and folders to the weekly created repository
You need to notify me when your homework is committedso that I can add comments to your code and grade yourwork each week
YOUR WEEKLY FEWD GITHUBREPOSITORY
When you are ready for me to review your assignments dothe following
Go to your weekly repo on githubcom eg
Open a new issue under the Issues Tab
In the title field write (eg) FEWD_Week1 AssignmentIn the comment field write wmyers assignmentcommittedNow submit the issue
httpsgithubcom[your-github-id]FEWD_Week1
httpsgithubcom[your-github-id]FEWD_Week1issues
YOUR WEEKLY FEWD GITHUBREPOSITORY
I will submit feedback each week in two ways
Comment on your code for each commit that you do forthe assignment in your weekly repoGrade your work and put the result in a new issue on yourweekly repo
FEWD - HTML BASICS
AGENDAHTML Tags amp CSS Selectors ReviewStructure Reading w UnderstandingExternal Style SheetsLab Time
HTML TAGS amp CSS SELECTORS
HTML BASICS
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
LETS START USING GITHUB AND GITGitHub Video Explanation
Download the zip file from this URL and extract the fileshttpbitly1jCVe9d
Mac Just double-click on the zip to extract itWin Right-click on the zip file and choose Extract here
Open the Getting_Started_With_GitHubpdf in the intro-to-gitfolder in the extracted zip
WHERE SHALL WE PUT OUR FILESLets start by making a new folder called FEWD in the userhome directory
Mac UsersltusernamegtWin CUsersltusernamegt
This is where we will put everything related to the FEWDcourse For the rest of the course Ill refer to this folder as[home]FEWD
NB If you cant find your user home directory then justcreate the FEWD folder on your Desktop
CREATE A GITHUB REPOSITORYFor our first repository you will do the following using theGitHub desktop app
Use the + button in the top-left of the app (Create tab)Create a new repository called HelloWorldChoose the [home]FEWD folder for the local pathOpen the hello_world folder in the downloaded intro-to-git folder and copy the two files into your new HelloWorldrepository folderCommit the changes and publish the repository togithubcom
CLONE A GITHUB REPOSITORYNow clone (make a local copy) of a repository on GitHub
Go to this URL on GitHub in your Chrome browser
Click on the button with an arrow on a screen (located tothe left of DOWNLOAD ZIP button)Allow the browser to launch GitHub DesktopNavigate to [home]FEWD folder in the pop-up and savethe ga-fewd-files cloned repoNow open this ga-fewd-files folder in your text editor
THIS IS WHERE I WILL PUT THE STARTER CODE FOREACH WEEKLY LESSON DO NOT WORK IN THIS REPO
httpsgithubcomwmyersga-fewd-files
YOUR WEEKLY FEWD GITHUBREPOSITORY
Use the + button in the top-left of GitHub Desktop(Create tab)Create a new repository called FEWD_Week1Choose the [home]FEWD folder for the local pathOpen this repo folder in your editorCommit the changes and publish the FEWD_Week1repository to githubcom
THIS IS WHERE YOU WILL PUT THE FILES THAT YOUWORK ON EACH WEEK
YOUR WEEKLY FEWD GITHUBREPOSITORY
Remember that you will do all your classwork andhomework in your weekly GitHub repository
You create a new repository each week named in aconsistent way
eg FEWD_Week1 FEWD_Week2 etc
YOUR WEEKLY FEWD GITHUBREPOSITORY
Each week you will be given a homework assignment Whenyou have completed the assignment you will commit thefiles and folders to the weekly created repository
You need to notify me when your homework is committedso that I can add comments to your code and grade yourwork each week
YOUR WEEKLY FEWD GITHUBREPOSITORY
When you are ready for me to review your assignments dothe following
Go to your weekly repo on githubcom eg
Open a new issue under the Issues Tab
In the title field write (eg) FEWD_Week1 AssignmentIn the comment field write wmyers assignmentcommittedNow submit the issue
httpsgithubcom[your-github-id]FEWD_Week1
httpsgithubcom[your-github-id]FEWD_Week1issues
YOUR WEEKLY FEWD GITHUBREPOSITORY
I will submit feedback each week in two ways
Comment on your code for each commit that you do forthe assignment in your weekly repoGrade your work and put the result in a new issue on yourweekly repo
FEWD - HTML BASICS
AGENDAHTML Tags amp CSS Selectors ReviewStructure Reading w UnderstandingExternal Style SheetsLab Time
HTML TAGS amp CSS SELECTORS
HTML BASICS
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
WHERE SHALL WE PUT OUR FILESLets start by making a new folder called FEWD in the userhome directory
Mac UsersltusernamegtWin CUsersltusernamegt
This is where we will put everything related to the FEWDcourse For the rest of the course Ill refer to this folder as[home]FEWD
NB If you cant find your user home directory then justcreate the FEWD folder on your Desktop
CREATE A GITHUB REPOSITORYFor our first repository you will do the following using theGitHub desktop app
Use the + button in the top-left of the app (Create tab)Create a new repository called HelloWorldChoose the [home]FEWD folder for the local pathOpen the hello_world folder in the downloaded intro-to-git folder and copy the two files into your new HelloWorldrepository folderCommit the changes and publish the repository togithubcom
CLONE A GITHUB REPOSITORYNow clone (make a local copy) of a repository on GitHub
Go to this URL on GitHub in your Chrome browser
Click on the button with an arrow on a screen (located tothe left of DOWNLOAD ZIP button)Allow the browser to launch GitHub DesktopNavigate to [home]FEWD folder in the pop-up and savethe ga-fewd-files cloned repoNow open this ga-fewd-files folder in your text editor
THIS IS WHERE I WILL PUT THE STARTER CODE FOREACH WEEKLY LESSON DO NOT WORK IN THIS REPO
httpsgithubcomwmyersga-fewd-files
YOUR WEEKLY FEWD GITHUBREPOSITORY
Use the + button in the top-left of GitHub Desktop(Create tab)Create a new repository called FEWD_Week1Choose the [home]FEWD folder for the local pathOpen this repo folder in your editorCommit the changes and publish the FEWD_Week1repository to githubcom
THIS IS WHERE YOU WILL PUT THE FILES THAT YOUWORK ON EACH WEEK
YOUR WEEKLY FEWD GITHUBREPOSITORY
Remember that you will do all your classwork andhomework in your weekly GitHub repository
You create a new repository each week named in aconsistent way
eg FEWD_Week1 FEWD_Week2 etc
YOUR WEEKLY FEWD GITHUBREPOSITORY
Each week you will be given a homework assignment Whenyou have completed the assignment you will commit thefiles and folders to the weekly created repository
You need to notify me when your homework is committedso that I can add comments to your code and grade yourwork each week
YOUR WEEKLY FEWD GITHUBREPOSITORY
When you are ready for me to review your assignments dothe following
Go to your weekly repo on githubcom eg
Open a new issue under the Issues Tab
In the title field write (eg) FEWD_Week1 AssignmentIn the comment field write wmyers assignmentcommittedNow submit the issue
httpsgithubcom[your-github-id]FEWD_Week1
httpsgithubcom[your-github-id]FEWD_Week1issues
YOUR WEEKLY FEWD GITHUBREPOSITORY
I will submit feedback each week in two ways
Comment on your code for each commit that you do forthe assignment in your weekly repoGrade your work and put the result in a new issue on yourweekly repo
FEWD - HTML BASICS
AGENDAHTML Tags amp CSS Selectors ReviewStructure Reading w UnderstandingExternal Style SheetsLab Time
HTML TAGS amp CSS SELECTORS
HTML BASICS
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CREATE A GITHUB REPOSITORYFor our first repository you will do the following using theGitHub desktop app
Use the + button in the top-left of the app (Create tab)Create a new repository called HelloWorldChoose the [home]FEWD folder for the local pathOpen the hello_world folder in the downloaded intro-to-git folder and copy the two files into your new HelloWorldrepository folderCommit the changes and publish the repository togithubcom
CLONE A GITHUB REPOSITORYNow clone (make a local copy) of a repository on GitHub
Go to this URL on GitHub in your Chrome browser
Click on the button with an arrow on a screen (located tothe left of DOWNLOAD ZIP button)Allow the browser to launch GitHub DesktopNavigate to [home]FEWD folder in the pop-up and savethe ga-fewd-files cloned repoNow open this ga-fewd-files folder in your text editor
THIS IS WHERE I WILL PUT THE STARTER CODE FOREACH WEEKLY LESSON DO NOT WORK IN THIS REPO
httpsgithubcomwmyersga-fewd-files
YOUR WEEKLY FEWD GITHUBREPOSITORY
Use the + button in the top-left of GitHub Desktop(Create tab)Create a new repository called FEWD_Week1Choose the [home]FEWD folder for the local pathOpen this repo folder in your editorCommit the changes and publish the FEWD_Week1repository to githubcom
THIS IS WHERE YOU WILL PUT THE FILES THAT YOUWORK ON EACH WEEK
YOUR WEEKLY FEWD GITHUBREPOSITORY
Remember that you will do all your classwork andhomework in your weekly GitHub repository
You create a new repository each week named in aconsistent way
eg FEWD_Week1 FEWD_Week2 etc
YOUR WEEKLY FEWD GITHUBREPOSITORY
Each week you will be given a homework assignment Whenyou have completed the assignment you will commit thefiles and folders to the weekly created repository
You need to notify me when your homework is committedso that I can add comments to your code and grade yourwork each week
YOUR WEEKLY FEWD GITHUBREPOSITORY
When you are ready for me to review your assignments dothe following
Go to your weekly repo on githubcom eg
Open a new issue under the Issues Tab
In the title field write (eg) FEWD_Week1 AssignmentIn the comment field write wmyers assignmentcommittedNow submit the issue
httpsgithubcom[your-github-id]FEWD_Week1
httpsgithubcom[your-github-id]FEWD_Week1issues
YOUR WEEKLY FEWD GITHUBREPOSITORY
I will submit feedback each week in two ways
Comment on your code for each commit that you do forthe assignment in your weekly repoGrade your work and put the result in a new issue on yourweekly repo
FEWD - HTML BASICS
AGENDAHTML Tags amp CSS Selectors ReviewStructure Reading w UnderstandingExternal Style SheetsLab Time
HTML TAGS amp CSS SELECTORS
HTML BASICS
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CLONE A GITHUB REPOSITORYNow clone (make a local copy) of a repository on GitHub
Go to this URL on GitHub in your Chrome browser
Click on the button with an arrow on a screen (located tothe left of DOWNLOAD ZIP button)Allow the browser to launch GitHub DesktopNavigate to [home]FEWD folder in the pop-up and savethe ga-fewd-files cloned repoNow open this ga-fewd-files folder in your text editor
THIS IS WHERE I WILL PUT THE STARTER CODE FOREACH WEEKLY LESSON DO NOT WORK IN THIS REPO
httpsgithubcomwmyersga-fewd-files
YOUR WEEKLY FEWD GITHUBREPOSITORY
Use the + button in the top-left of GitHub Desktop(Create tab)Create a new repository called FEWD_Week1Choose the [home]FEWD folder for the local pathOpen this repo folder in your editorCommit the changes and publish the FEWD_Week1repository to githubcom
THIS IS WHERE YOU WILL PUT THE FILES THAT YOUWORK ON EACH WEEK
YOUR WEEKLY FEWD GITHUBREPOSITORY
Remember that you will do all your classwork andhomework in your weekly GitHub repository
You create a new repository each week named in aconsistent way
eg FEWD_Week1 FEWD_Week2 etc
YOUR WEEKLY FEWD GITHUBREPOSITORY
Each week you will be given a homework assignment Whenyou have completed the assignment you will commit thefiles and folders to the weekly created repository
You need to notify me when your homework is committedso that I can add comments to your code and grade yourwork each week
YOUR WEEKLY FEWD GITHUBREPOSITORY
When you are ready for me to review your assignments dothe following
Go to your weekly repo on githubcom eg
Open a new issue under the Issues Tab
In the title field write (eg) FEWD_Week1 AssignmentIn the comment field write wmyers assignmentcommittedNow submit the issue
httpsgithubcom[your-github-id]FEWD_Week1
httpsgithubcom[your-github-id]FEWD_Week1issues
YOUR WEEKLY FEWD GITHUBREPOSITORY
I will submit feedback each week in two ways
Comment on your code for each commit that you do forthe assignment in your weekly repoGrade your work and put the result in a new issue on yourweekly repo
FEWD - HTML BASICS
AGENDAHTML Tags amp CSS Selectors ReviewStructure Reading w UnderstandingExternal Style SheetsLab Time
HTML TAGS amp CSS SELECTORS
HTML BASICS
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
YOUR WEEKLY FEWD GITHUBREPOSITORY
Use the + button in the top-left of GitHub Desktop(Create tab)Create a new repository called FEWD_Week1Choose the [home]FEWD folder for the local pathOpen this repo folder in your editorCommit the changes and publish the FEWD_Week1repository to githubcom
THIS IS WHERE YOU WILL PUT THE FILES THAT YOUWORK ON EACH WEEK
YOUR WEEKLY FEWD GITHUBREPOSITORY
Remember that you will do all your classwork andhomework in your weekly GitHub repository
You create a new repository each week named in aconsistent way
eg FEWD_Week1 FEWD_Week2 etc
YOUR WEEKLY FEWD GITHUBREPOSITORY
Each week you will be given a homework assignment Whenyou have completed the assignment you will commit thefiles and folders to the weekly created repository
You need to notify me when your homework is committedso that I can add comments to your code and grade yourwork each week
YOUR WEEKLY FEWD GITHUBREPOSITORY
When you are ready for me to review your assignments dothe following
Go to your weekly repo on githubcom eg
Open a new issue under the Issues Tab
In the title field write (eg) FEWD_Week1 AssignmentIn the comment field write wmyers assignmentcommittedNow submit the issue
httpsgithubcom[your-github-id]FEWD_Week1
httpsgithubcom[your-github-id]FEWD_Week1issues
YOUR WEEKLY FEWD GITHUBREPOSITORY
I will submit feedback each week in two ways
Comment on your code for each commit that you do forthe assignment in your weekly repoGrade your work and put the result in a new issue on yourweekly repo
FEWD - HTML BASICS
AGENDAHTML Tags amp CSS Selectors ReviewStructure Reading w UnderstandingExternal Style SheetsLab Time
HTML TAGS amp CSS SELECTORS
HTML BASICS
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
YOUR WEEKLY FEWD GITHUBREPOSITORY
Remember that you will do all your classwork andhomework in your weekly GitHub repository
You create a new repository each week named in aconsistent way
eg FEWD_Week1 FEWD_Week2 etc
YOUR WEEKLY FEWD GITHUBREPOSITORY
Each week you will be given a homework assignment Whenyou have completed the assignment you will commit thefiles and folders to the weekly created repository
You need to notify me when your homework is committedso that I can add comments to your code and grade yourwork each week
YOUR WEEKLY FEWD GITHUBREPOSITORY
When you are ready for me to review your assignments dothe following
Go to your weekly repo on githubcom eg
Open a new issue under the Issues Tab
In the title field write (eg) FEWD_Week1 AssignmentIn the comment field write wmyers assignmentcommittedNow submit the issue
httpsgithubcom[your-github-id]FEWD_Week1
httpsgithubcom[your-github-id]FEWD_Week1issues
YOUR WEEKLY FEWD GITHUBREPOSITORY
I will submit feedback each week in two ways
Comment on your code for each commit that you do forthe assignment in your weekly repoGrade your work and put the result in a new issue on yourweekly repo
FEWD - HTML BASICS
AGENDAHTML Tags amp CSS Selectors ReviewStructure Reading w UnderstandingExternal Style SheetsLab Time
HTML TAGS amp CSS SELECTORS
HTML BASICS
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
YOUR WEEKLY FEWD GITHUBREPOSITORY
Each week you will be given a homework assignment Whenyou have completed the assignment you will commit thefiles and folders to the weekly created repository
You need to notify me when your homework is committedso that I can add comments to your code and grade yourwork each week
YOUR WEEKLY FEWD GITHUBREPOSITORY
When you are ready for me to review your assignments dothe following
Go to your weekly repo on githubcom eg
Open a new issue under the Issues Tab
In the title field write (eg) FEWD_Week1 AssignmentIn the comment field write wmyers assignmentcommittedNow submit the issue
httpsgithubcom[your-github-id]FEWD_Week1
httpsgithubcom[your-github-id]FEWD_Week1issues
YOUR WEEKLY FEWD GITHUBREPOSITORY
I will submit feedback each week in two ways
Comment on your code for each commit that you do forthe assignment in your weekly repoGrade your work and put the result in a new issue on yourweekly repo
FEWD - HTML BASICS
AGENDAHTML Tags amp CSS Selectors ReviewStructure Reading w UnderstandingExternal Style SheetsLab Time
HTML TAGS amp CSS SELECTORS
HTML BASICS
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
YOUR WEEKLY FEWD GITHUBREPOSITORY
When you are ready for me to review your assignments dothe following
Go to your weekly repo on githubcom eg
Open a new issue under the Issues Tab
In the title field write (eg) FEWD_Week1 AssignmentIn the comment field write wmyers assignmentcommittedNow submit the issue
httpsgithubcom[your-github-id]FEWD_Week1
httpsgithubcom[your-github-id]FEWD_Week1issues
YOUR WEEKLY FEWD GITHUBREPOSITORY
I will submit feedback each week in two ways
Comment on your code for each commit that you do forthe assignment in your weekly repoGrade your work and put the result in a new issue on yourweekly repo
FEWD - HTML BASICS
AGENDAHTML Tags amp CSS Selectors ReviewStructure Reading w UnderstandingExternal Style SheetsLab Time
HTML TAGS amp CSS SELECTORS
HTML BASICS
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
YOUR WEEKLY FEWD GITHUBREPOSITORY
I will submit feedback each week in two ways
Comment on your code for each commit that you do forthe assignment in your weekly repoGrade your work and put the result in a new issue on yourweekly repo
FEWD - HTML BASICS
AGENDAHTML Tags amp CSS Selectors ReviewStructure Reading w UnderstandingExternal Style SheetsLab Time
HTML TAGS amp CSS SELECTORS
HTML BASICS
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
FEWD - HTML BASICS
AGENDAHTML Tags amp CSS Selectors ReviewStructure Reading w UnderstandingExternal Style SheetsLab Time
HTML TAGS amp CSS SELECTORS
HTML BASICS
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
AGENDAHTML Tags amp CSS Selectors ReviewStructure Reading w UnderstandingExternal Style SheetsLab Time
HTML TAGS amp CSS SELECTORS
HTML BASICS
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
HTML TAGS amp CSS SELECTORS
HTML BASICS
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
HTML BASICS
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
HTML SYNTAX
creates structured documents from page partsis written in the form of HTML elements consisting of tagselements either have opening and closing tags ltpgtltpgtor are empty they have no closing tag ltimggt
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
HTML SYNTAX
HTML tags can also have attributes which are propertieswritten inside the first (opening) tag
ltimg src=smileygifgt
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
MAIN TAGSlthtmlgtlthtmlgt
The root container tag for the whole document (web page)
ltheadgtltheadgt
The container tag for metadata and links to external files(eg css files)
ltbodygtltbodygt
Contains the visible structure and content of the web pagenested inside
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CONTENT TAGSHeading Elements
lth1gtLargest Headinglth1gt
lth2gt lth2gt
lth3gt lth3gt
lth4gt lth4gt
lth5gt lth5gt
lth6gtSmallest Headinglth6gt
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CONTENT TAGSText Elements
ltpgtThis is a paragraphltpgt
ltcodegtThis is some computer codeltcodegt
ltspangtNon-semantic inline contentltspangt
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CONTENT TAGSUnordered list
ltulgtltulgt
This is a very commonly used tag for things like navigationmenus or a displayed choice of items on an e-commerceweb page
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CONTENT TAGSUnordered list item
ltligtFirst itemltligt
ltligtNext itemltligt
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CONTENT TAGSLinks
lta href=LinkgtFirst itemltagt
To navigate to
a different place on the current pageanother local pagean external page in a different website
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
HTML VS HTML5HTML5 is HTML with a few additions The Doctype tells you ifthe page is HTML5 ready
ltDOCTYPE htmlgt
HTML HISTORY
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
HTML5brings many improvements and new features to webpagesmany features of HTML5 have been built to run on low-powered devices such as smartphones and tabletsintroduces the new ltvideogt ltaudiogt and ltcanvasgttagsintroduces many new structural document tags egltmaingt ltsectiongt ltarticlegt ltheadergtltfootergt ltasidegt ltnavgt and ltfiguregt - theseare like ltdivgt but with a semantic styleable name
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
GENERAL ASSEMBLY PRESSRELEASE
Copy the ga_press_release folder in the week1_working_filesfolder (inside ga-fewd-files) into your FEWD_Week1 folder(inside [home]FEWD)
Commit and publish the files in GitHub Desktop
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
MARKING UP CONTENTWe will add HTML tags to the different parts of content inindexhtml in the ga_press_release folder
This will show how are tags are used semantically fordifferent parts of text to create a document structure
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
NOW FOR SOME STYLINGNow that we have structured our HTML document for thepress release we want to add some CSS styles to make itlook a bit better
First we need to understand some CSS basics
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CSSThere is a little bit of CSS in the your HelloWorld repository
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CSSis a styling (stylesheet) language used for describing thepresentation of an HTML documentit separates document content from documentpresentation including control of layout colors andfontsit makes the page much easier to edit and update andimproves accessibilitymultiple HTML pages can share the same formatting bywriting the CSS in a separate css file and linking to it fromyour HTML page
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CSS SYNTAX
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CSSWhere does CSS go
Inline with the style attributelth1 style=color redgtHello Worldlth1gt
In the ltheadgtltheadgt ltstylegt ltstylegtltheadgt
h1 color red
In a separate file (best option)ltheadgt ltlink rel=stylesheet type=textcss href=pathtosomecssgtltheadgt
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CSSUsing a separate CSS file
It is best practice to put CSS in its own file and link to it fromthe ltheadgt
ltlink rel=stylesheet href=stylecssgt
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CSS BREAK DOWNp color red font-weight bold
This whole thing is called a rule
The p is called a selector and its followed by a set ofdeclarations in a declaration block
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CSS BREAK DOWNThe selector (p in this case) specifies what parts of the HTMLdocument should be styled by the declaration This selectorwill style all p elements on the page
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CSS BREAK DOWNThe declaration block here is
color red font-weight bold
Declarations go inside curly braces
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CSS BREAK DOWNDECLARATIONS
This example has two declarations Heres the firstcolor red
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CSS BREAK DOWNLets look at the second declaration
font-weight bold
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CSS BREAK DOWNWhy might we want to link to a separate CSS file
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
SEPARATION OF CONCERNSHTML - Document StructureCSS - Looks StyleJavaScript - Logic functionality behavior
It is historically seen as wrong to mix these things upPutting things where they belong reduces complexity andincreases maintainability However some new JSframeworks are challenging this way of thinking
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CASCADING STYLE SHEETS (CSS)COLORS
Colors can be specified in CSS in a variety of ways
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
COLORCOLOR KEYWORDS
These are used less frequently but are handy for basiccolors like black and white There are several
See for morehere
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
COLORHEX CODES (RGB)
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
COLORRGB COLOR VALUES
RGB(000)
The first value is red the second green the third blue
Each value can range from 0 to 255 which expresses thesame number of color steps as 00 to FF in base-16
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
COLORRGBA COLORS
RGBa works identically to RGB expect that it takes a 4thvalue called the alphaThis is a value between 0 and 1 which will be used todetermine a colors opacity on the page
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
COLORHSL COLORS
HSL
Similar notation to RGB values but specify colors usinghue saturation and lightness
HSLA
As with RGBa HSLa is exactly like HSL for the first 3values but takes a 4th alpha-channel value
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CSS SELECTORSElement Selector
If you want to directly style all tags (elements) of a certaintype (eg all ltpgt tags) they you style p
p color redltpgtNow my text is redltpgt
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CSS SELECTORSClass Selector
If you want to apply styles to groups of elements then use (dot) selectors These select any element with acorresponding class attribute
some-class color blue ltp class=some-classgtNow my text is blueltpgt
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CSS SELECTORSId Selector
If you want to apply styles to one unique element then use (hash) selectors This selects one element with a uniqueid attribute
some-id color green ltp id=some-idgtNow my text is greenltpgt
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
STYLING CONTENTNow lets try and add some basic styles to thega_press_release
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
COOKIE RECIPECopy the cookie_recipe folder in the week1_working_filesfolder into your FEWD_Week1 folder
Commit and publish the files in GitHub Desktop
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
COOKIE RECIPENow following the instructions in the indexhtml pagestructure the recipe HTML and apply some CSS styles - usingan external stylesheet
Extra points if you can get the image in the page with thestyle as described in the instructions
Feel free to use Google to find out about any styles and tagsthat we havent discussed yet We will take a more in-depthlook at the ltimggt tag after this exercise
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
MORE HTML AND CSS
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
AGENDABuilding A Simple Web Page
ImagesNavColorsFontsLinking To Other Pages
Lab Time
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
EXERCISE - WHAT TAG IS ITUsing Google (or your favourite search engine) find outmore about the following tags
ltimggtltnavgtlthrgt
You may have already used an ltimggt tag in thecookie_recipe Try using and styling all three in yourcookie_recipe page
The MDN (Mozilla Developer Network) online docs arerecommended over other online resources
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
MORE CONTENT TAGSltdivgtltdivgt
This is a generic container tag used when no specificsemantic tag is applicable It is a rectangular element whichcan be styled with margins padding borders background-colors width height etc Like many other elements it hasblock-level display which means it starts on a new line of thepage
ltdivgts are often nested in other ltdivgtsltdiv class=parentgt ltdiv class=childgtSome child contentltdivgtltdivgt
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
MORE ON IMAGESImages are placed using the ltimggt tag
ltimg src=imgimageNamejpg alt=no-image text title=hover textgt
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
IMAGESThe img tag requires a src attribute which tells thebrowser where to find the image
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
IMAGESHow would you write the src
There are different approaches to specifying an imagelocation
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
IMAGESInside webroot a relative path could be usedltimg src=imageslogopnggt
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
IMAGES - RELATIVE PATH
Given this folder structure the same image would beltimg src=imageslogopnggt means to go up a directory and can be usedrepeatedly would go up two directories
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
IMAGES - RELATIVE PATHltimg src=imageslogopnggt
Absolute URLs start with a which implies the rootdirectory of your web site
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
IMAGES - FULL URL ltimg src=httpsga-cores3amazonawscomproductionuploadsprogramdefault_image397thumb_User-Experience-Sketchingjpg
For linking to images make sure that you have permissionto use the image in this way Even then it is often better tohost a copy of the same image rather than link to anotherserver because it reduces dependency
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
IMAGESalt and title attribute
ltimg src=puppyjpg alt=My cute puppy title=My cute puppygt
alt - piece of text to be used in lieu of the image when theimage is unavailabletitle - text that appears when your mouse hovers over theimage
Using alt attributes has the added benefit of giving searchengines more linguistic context about the image as it is usedon your page
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
IMAGE FILE FORMATSThere are three main image file formats
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
IMAGE FILE FORMATSPNG
Supports transparency and semi-transparency great forlogos icons and repeating background tiles
Almost always preferable to a gif unless semi-transparency is not needed and the gif format issignificantly smaller
Required for retina display on mobile browsers and apps
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
IMAGE FILE FORMATSGIF
Can have basic transparency typically a png is usedinsteadCan be used for simple animations
Find an animated gif online download it and add it one ofthe webpages you have been working on today
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
IMAGE FILE FORMATSJPEG
No transparency can be stored at different compressionlevels with varying amounts of lossy-ness
This is typically the best format for photos (Try to balancebetween photo quality and file size)
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
ANCHOR TAGSLike the src attribute in ltimggt tags the href attribute inltagt tags denote a path to a location
These paths can be relative absolute or a full URL
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
ANCHOR TAGS IN THE SAME PAGEYou can use anchor links to jump to other parts of your page- for example the bottom of the page
First define the link in the href - note the (hash)lta href=bottomgtJump to bottomltagt
To create the place to jump to either use another ltagt tagwith a name attribute
ltpgtlta name=bottomgtltagtWelcome to the bottom of the pageltpgt
Or just target the id of a tagltp id=bottomgtWelcome to the bottom of the pageltpgt
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
BUILDING WEBSITESCopy the assignment folder in the week1_working_filesfolder into your FEWD_Week1 repository folder Commit andpublish the files in GitHub Desktop
Now go to the assignment folder in your repo in githubcomand you will see the READMEmd (markdown) file renderedto be readable
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
ABOUT MELets build the About Me page together Take a look at theabout_me_deliverablepng in theassignmentsolutionimages folder We want to buildsomething with this structure and then add some stylinglike we have done before
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
ABOUT ME
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
MARGINS PADDING AND BORDERS(BOX MODEL)
The CSS Box Model is essentially a series of nested boxesthat wrap around an HTML element The hierarchy of theseboxes is margins borders padding and then content
margin sets the outer transparent rectangular border ofan elementborder sets the visible rectangular border style of theelementpadding sets the inner transparent rectangular borderof an element (is colored by a background-color)
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
MARGINS AND PADDINGThe values for margin and border declarations can be setwith shorthand
margin top right bottom left (clockwise)margin top-and-bottom left-and-right
Each side can also be set individually with a specificdeclaration
padding-left 10pxpadding-top 20pxetc
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
BORDERSBorders have their own style declarations
border-width (number px)border-style (string - eg solid dotted dashed)border-color (string or hex value)
The common shorthand syntax to set a border is
width style colorborder 4px solid red
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
ALIGNING AND FLOATING IMAGESYou can align images with the text-align propertyapplied to the container of the image
text-align left text-align center text-align right
Aligned images do not wrap text around them Aligningimages will only position the image left right or center withany text following before and after the image Aligningleaves white space on your web page
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
ALIGNING AND FLOATING IMAGESYou can float images to one side with the float propertyapplied to the image
float left float right
The float property specifies that an element should be takenout from the normal flow of the page and placed along theleft or right side of its container where text inline elementsand following elements will wrap around it
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CSS CASCADE INHERITANCE ampSPECIFICITY
Cascade Inheritance and Specificity are three inter-relatedterms in CSS that relate to how the browser will apply aparticular CSS rule to a given HTML element
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CSS CASCADEA cascade is a flow of water over a series of steps
The cascade (in Cascading Style Sheets) is formed by threemain sources of style information
the browser (user-agent) default styles for HTMLthe styles specified by an end userthe styles linked to the document by its author (ie youthe developer)
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CSS CASCADE AND SPECIFICITYThe cascading of these three sources of styling is analgorithm that decides which style to apply to an elementwhen multiple styling rules are available
The specificity of a style is a score calculated by thecascading algorithm to determine which style is the mostimportant
httpsdevelopermozillaorgen-USdocsWebCSSCascade
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CSS INHERITANCEInheritance is where a child element inherits a styledeclaration from a parent container It could be animmediate parent container or an ancestor containerfurther up the DOM tree
body color redp background-color yellow
ltpgt will inherit the red text color from ltbodygt unless itdefines a more specific color declaration in its own style rule
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
CSS FONTSIn our web pages we default to system fonts like Times Arialand Helvetica
To embed a nicer font that any end user would see use thethe CSS3 font embedding syntax
Define your font-face links at the top of your CSS filefont-face font-family MyFont src url(pathtoMyFontttf)
Now set the value of the font-family declaration in agiven rule to use your embedded font
p font-family MyFont
httpwwwdafontcom
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
METADATA IN THE HEADMetadata is data about data So the ltmetagt tags defined inthe head provide additional data about the data in theHTML document This data will not be displayed but will beread by search engine spiders
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
METADATA IN THE HEADDefine keywords for search engines
ltmeta name=keywords content=HTML CSS JavaScriptgt
Define a description of your web pageltmeta name=description content=Developer CVgt
Define the author of a pageltmeta name=author content=Your Namegt
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
LAB TIME - YOUR PORTFOLIOFinish building the About Me page based on the code-alongwe have done together Now think about the Portfolio pagewhich you want to build for the homework assignmentbased on the portfolio_deliverablepng
Remember to link up these pages so you can click from oneto the other
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
HOMEWORKBuild your own portfolioWatch a video on the Internet about the InternetRead about CSS Colors
Please also submit an for todays lessonexit ticket
