Transcription
HTML, CSS, Bootstrap Framework
What we will talk about:Front-end vs Back-end coding at bswiftDefining HTML, CSS and JavascriptHow the client stylesheets workExamplesTools
Static Pages / Dynamic Pages
SERVERpage.htmlpage.htmlpage.htmlA static website is a group of self-contained,individual pages (or page), sent to the browser fromthe server one-page-at-a-time.
.netSQL databasesSERVERpage.htmlHTMLDyamic web content is built when it is requested,by the user directly, or programmatically whilea user is on a page (e.g., facebook updates).Most websites contain both static and dynamic elements.
front-endSERVERREQUESTHTMLCSSJavascriptthanks!Can I havea webpage,please?.netSQL databasesback-end “recipe”SERVERRESPONSE
Server-side / Client-sideakaBack End / Front-end
t.jsClient-side (front-end) coding includes HTML, CSSand Javascript. This just means that our code will bedownloaded from the server and then compiledentirely in the browser.
HTML, CSS, Javascript
Three layers of web design:Structure, Style, Behavior
TML markupSite planningThree layers of web design
HTML
Hyper Text Markup Language
Hyper Text
Markup LanguageA markup language is aset of markup tags.The purpose of the tags is togroup and describe page content.
Markup LanguageWithout any markup to give your content structure, thebrowser renders unformatted and unstyled text, alsoknown as “plain text”.
Markup LanguageHTML tags give structure and meaning to your content.“Semantic markup” refers to the use of meaningful tags todescribe content (e.g. using header tags for header content).
Markup LanguageOnce your content is marked up, the browser applies built-indefault styles to the tags. While you can override these styleswith css, your marked up, non-css styled document should bereadable and have a clear hierarchy.
doctypehtmlheadbody
EXCEPTION !DOCTYPE html The doctype is not actually a tag,but a declaration, telling the browserwhat kind of html you are using. Thedoctype above declares HTML 5.
html /html The html element definesthe whole HTML document.
head /head The head element contains specialelements that instruct the browserwhere to find stylesheets, provide metainfo, and more.
body /body The body element containsthe document content (what is showninside the browser window).
NestingThe use of our first three tags (html, head and body),introduces and important concept: Nesting, which is whentags “wrap” other tags. When you create markup, you shouldindicate nesting by indenting the nested tags with 2 spaces(preferred) or a tab. html head /head body h1 /h1 p /p /body /html
Document Hierarchy: Parents, children and siblingsJust as in a genealogy tree, the family hierarchy is described interms of relationships. All elements in the document have aparent (up to ‘document’, which is at the top), and may havechildren (nested inside) or siblings (placed alongside). parent x child and sibling y /child and sibling y child and sibling z /child and sibling z /parent x
The ‘address’ of an elementThe document hierarchy provides us with an ‘address’ for eachelement.in the div with class “client-text-container”, make all of the h2elements orange and 24px.
HTML Elements
Anatomy of an Element tag Content /tag An HTML element includes boththe HTML tag and everything betweenthe tag (the content).
Anatomy of an Element tag Content /tag Tags normally come in pairs. Thefirst tag is the start tag, and the secondtag is the end tag.
Anatomy of an Element h1 Main Headline /h1 HTML has a defined set of tagnames (also called keywords) thatthe browser understands.
The essential element (inline)pembrh1 – h6ulolaimg(div)istrongbqblockquote(span)
Nested TagseSpace
Basic StructureeSpace
HeadeSpace
PrevieweSpace
BodyeSpace
PrevieweSpace
HeaderseSpace
PrevieweSpace
ParagrapheSpace
PrevieweSpace
ListseSpace
PrevieweSpace
DiveSpace
PrevieweSpace
Block elementseSpace
Inline elementseSpace
PrevieweSpace
More Inline elementseSpace
PrevieweSpace
Anatomy of an Element html lang ”en” /html Most elements can have attributes,which provides additional informationabout the element.
Anatomy of an Element div class ”left-nav” /div Attributes always follow the sameformat: name ”value”. You can useeither single or double quotes.
The essential attributeslink link rel ”stylesheet” type-”text/css” href ”stylesheet/styles.css” img img src ”images/image.jpg” alt ”Sam” a a href ”http://colum.edu” My school /a
CSS
Cascading Style Sheet
The StylesheetA stylesheet is a set of rules defininghow an html element will be “presented”in the browser.These rules are targeted to specificelements in the html document.
The CascadeThe “cascade” part of CSS is a set of rulesfor resolving conflicts with multiple CSSrules applied to the same elements.For example, if there are two rules definingthe color or your h1 elements, the rule thatcomes last in the cascade order will“trump” the other.
low importanceBrowser stylesheethigh importanceLinked (external) stylesheetEmbedded (internal) stylesheetInline (internal) Styles
InheritanceMost elements will inherit many style propertiesfrom their parent elements by default.HTMLrelationship body div ul li /li /ul /div /body parent of siteparent of ul and li, child of bodyparent of li, child of div and bodychild of ul, div, and body
Inheritancebodymake the paragraph 16px, Verdana, redpmake the paragraph blue16px, Verdana, blue
SpecificityShortly after styling your first html elements,you will find yourself wanting more control overwhere your styles are applied.This is where specificity comes in.Specificity refers to how specific your selector isin naming an element.
Specificitybodymake the paragraph 16px, Verdana, redpmake the paragraph bluep.pinkmake the paragraph pink16px, Verdana, pink
HTML div id ”plan-2323” p Here is some text. /p p Hide this text. /p div div id ”plan-2323” p Here is some text. /p p class ”hideclass” Hide this text. /p div CSS#plan-2323.hideclass {display: none}
CSS SyntaxSyntax the rules for how to write the language
Three terms for describing your styles:CSS ruleCSS selectorCSS declaration
CSS Ruleselector {property: value;}declarationEvery style is defined by a selector anda declaration. The declaration contains at leastone property/value pair.Together they arecalled a CSS Rule.
CSS Selectorbody {font-family: Arial, Helvetica}p {color: #666666}h1 {font-size: 24px}a {color: blue}The selector associates css rules withHTML elements.
CSS Selectorp {color: red}The selector is typed in front of the declaration,with a space separating it and the openingcurly-bracket (aka curly-brace).Typically, extra spaces and returns are added asshown for the sake of readability.
CSS Selectorh1,h2,h3,h4 {font-weight: bold}You can apply styles to multiple selectors in thesame rule by separating the selectors withcommas.
CSS Declarationp {property: value}The declaration is always defined in a property/value pair. The two are separated by a colon.How you define the properties will affect howHTML elements are displayed.
CSS Declarationp {font-family: Arial, sans-serif;font-size: 14px;color: #666666;}You can apply multiple declarations to aselector(s) by separating the delcarations withsemi-colons.
CSS Selectors
pType (element)#ID.Class
Type (element) Selectorsbody {declaration}p {declaration}h1 {declaration}ul {declaration}The simplest selector is the type selector, whichtargets an html element by name.
Element SelectoreSpace
PrevieweSpace
The essential selector types ingElementsembodybrih1 – h6ulolaimgdivstrongbqblockquotespan
ID SelectorsCSS#logo {declaration}HTML img id ”logo” src ”” alt ”” An ID is an html attribute that is added to yourhtml markup. You reference that ID in your csswith a hash.
ID SelectoreSpace
PrevieweSpace
Class SelectorsCSS.ingredients {declaration}HTML ul class ”ingredients” A class is an html attribute that is added to yourhtml markup. You reference that ID in your csswith a period.
Class SelectoreSpace
PrevieweSpace
IDs vs ClassesThe most important difference between IDsand classes is that there can be only one IDon a page, but multiple classes.An ID is more specific than a class.An element can have both an ID andmultiple classes.
IDs vs ClassesID: #344-34-4344Class: MaleClass: EmployeeID: #123-54-9877Class: FemaleClass: Employee
2 RuleseSpace
PrevieweSpace
Descendant SelectorsCSS#sidebar .author {declaration}HTML div id ”sidebar” p class ”author” /p /div A space between two selectors indicates adescendant selector. In the example above, thestyle is targeted to an element with the class“author” inside the id “sidebar”.
Descendent SelectoreSpace
PrevieweSpace
Multiple classesCSS.ingredients.time {declaration}HTML div class ”ingredients time” h1 /h1 /div Elements can have multiple classes, giving youmore control. The are written in the CSS in theexact order they appear in the html, with nospaces.
Box Model (Block)eSpace
Box Model (Block)eSpace
Box Model (Block)eSpace
PrevieweSpace
Margin collapseeSpace
Margin collapseeSpace
Box Model (Inline)eSpace
Box Model (Inline)eSpace
PrevieweSpace
Relative PositioneSpace
Absolute PositioneSpace
Fixed PositioneSpace
FloateSpace
FloateSpace
www.getbootstrap.comBootstrap is Front-end FrameworkHTML, CSS, and JS framework fordeveloping responsive, mobile first projects on the web.
Bootstrap is Ready-to-use Web ElementsHTML / CSS elements for button, form, table,image, navbar, label, progress bar, alert etc.
EXAMPLESof Bootstrap Elements
more EXAMPLESof Bootstrap Elements
Websites created by Bootstraphttp://unroll.me
Websites created by Bootstrapwww.fliplingo.com
Why Bootstrap? Save 100 hours of codingEasy to use web elementsQuick responsive prototype / websiteGreat documentation
Bootstrap Package CSS - bootstrap.css JS - bootstrap.js Icon Fonts - glyphicons-halflings-regular.ttf
Bootstrap CDNwww.bootstrapcdn.com
Bootstrap Playgroundhttp://bit.ly/bs-play
Bootstrap ComponentsStart Workshop
What is Grid in web design?
What is Grid in web design?123456789 10 11 1212 Grid
What is Grid in web design?124 Grid34564 Grid789 10 11 124 Grid4 Grids x 3 Columns 12 Grids
Bootstrap Grid12 Responsive Grid
Grid Overlayfor Bootstrap & Foundationhttp://bit.ly/grid-overlay
4 Sizes of Bootstrap GridSize NameScreen SizeCSS ClassExtra Small Devices(Phone)0 - 767 px.col-xs-1 .col-xs-12Small Devices (Tablet)768 - 991 px.col-sm-1 .col-sm-12Medium Devices (Desktop)992 - 1219 px.col-md-1 .col-md-12Large Devices (Largescreen desktop)1200px .col-lg-1 .col-lg-12
4 Sizes of Bootstrap GridSize NameScreen SizeCSS ClassExtra Small Devices(Phone)0 - 767 px.col-xs-1 .col-xs-12Small Devices (Tablet)768 - 991 px.col-sm-1 .col-sm-12Medium Devices (Desktop)992 - 1219 px.col-md-1 .col-md-12Large Devices (Largescreen desktop)1200px .col-lg-1 .col-lg-12
Bootstrap Grid Examplehttp://bit.ly/bs-agencyHow many grids in each box?
Bootstrap Grid Example4 grids x 3 Columns
Bootstrap Grid Example
Bootstrap Grid Example
Bootstrap Grid Example 2How many grids in each box?
Bootstrap Grid Example 26 grids x 2 Columns
Bootstrap Grid Example 2
Bootstrap Grid Example 2
Bootstrap Row1 Row 12 Grids
Bootstrap Row3 Rows
Bootstrap Row Example
Bootstrap Row Example
Bootstrap Responsive GridColumns will stack when responsive
Bootstrap Responsive GridDesktop12Mobile3Columns stack on mobile123
Bootstrap Grid Workshop3 Easy Steps:1. Add container2. Add row3. Add columns
Bootstrap Grid Workshophttp://bit.ly/bs-business
Bootstrap is Front-end Framework HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. www.getbootstrap.com