Download to read offline
Uploaded byssusered83521
PPTX, PDF56 views
html css js bootstrap framework thisis i
The document provides a detailed overview of HTML, CSS, and Bootstrap, covering essential concepts such as front-end vs back-end coding, the structure of HTML documents, CSS syntax, and the usage of Bootstrap for responsive web design. It explains key elements, markup language, and the hierarchical organization of HTML content while introducing CSS rules and selectors, including specificity and the box model. Additionally, it outlines Bootstrap's grid system and advantages for efficient web development.
Recommended
More Related Content
Similar to html css js bootstrap framework thisis i
Recently uploaded
html css js bootstrap framework thisis i
- 1.
- 2.What we willtalkabout:Front-end vs Back-end coding at bswiftDefining HTML, CSS and JavascriptHow the client stylesheets workExamplesTools
- 3.Static Pages /Dynamic Pages
- 4.A static websiteis a group of self-contained,individual pages (or page), sent to the browserfrom the server one-page-at-a-time.SERVERpage.html page.html page.html
- 5.Dyamic web contentis built when it isrequested, by the user directly, orprogrammatically while a user is on a page(e.g., facebook updates).Most websites contain both static and dynamicSERVER page.htmlSQL databases.netHTML
- 6.SERVERREQUESTHTMLCSSJavascriptSQL databases.netCan Ihavea webpage,please?back-end “recipe”front-endSERVERRESPONSEthanks!
- 7.Server-side / Client-sideakaBack End / Front-end
- 8.Client-side (front-end) codingincludes HTML, CSSand Javascript. This just means that our code willbe downloaded from the server and then compiledentirely in the browser.SERVERpage.html.aspSQLetc.netBROWSERstyle.cssscript.js
- 9.
- 10.Three layers ofwebdesign:Structure, Style, Behavior
- 11.
- 12.
- 13.
- 14.
- 15.Markup LanguageA markuplanguage isa set of markup tags.The purpose of the tags is togroup and describe pagecontent.
- 16.Markup LanguageWithout anymarkup to give your content structure,the browser renders unformatted and unstyled text,also known as “plain text”.
- 18.Markup LanguageHTML tagsgive structure and meaning to your content.“Semantic markup” refers to the use of meaningful tags todescribe content (e.g. using header tags for headercontent).
- 19.Markup LanguageOnce yourcontent is marked up, the browser applies built-in default styles to the tags. While you can override thesestyles with css, your marked up, non-css styled documentshould be readable and have a clear hierarchy.
- 20.
- 21.<!DOCTYPEhtml>EXCEPTIONThe doctype isnot actually a tag,but a declaration, telling thebrowser what kind of html you areusing. The doctype above declaresHTML 5.
- 22.<html></html>The <html> elementdefinesthe whole HTMLdocument.
- 23.<head></head>The <head> elementcontains specialelements that instruct the browserwhere to find stylesheets, providemeta info, and more.
- 24.<body></body>The <body> elementcontainsthe document content (what isshowninside the browser window).
- 25.NestingThe use ofour first three tags (html, head and body),introduces and important concept: Nesting, which is whentags “wrap” other tags. When you create markup, youshould indicate nesting by indenting the nested tags with 2spaces (preferred) or a tab.<html><head> </head><body><h1></h1><p></p></body></html>
- 26.Document Hierarchy: Parents,children and siblingsJust as in a genealogy tree, the family hierarchy is describedin terms of relationships. All elements in the document havea parent (up to ‘document’, which is at the top), and mayhave children (nested inside) or siblings (placed alongside).<parent x><child and sibling y> </child and siblingy><child and sibling z> </child and siblingz></parent x>
- 27.The ‘address’ ofan elementThe document hierarchy provides us with an ‘address’ foreach element.in the div with class “client-text-container”, make all of theh2 elements orange and 24px.
- 28.
- 29.Anatomy of anElement<tag>Content</tag>AnHTML element includes boththe HTML tag and everythingbetweenthe tag (the content).
- 30.Anatomy of anElement<tag>Content</tag>Tagsnormally come in pairs. Thefirst tag is the start tag, and thesecond tag is the end tag.
- 31.Anatomy of anElement<h1>MainHeadline</h1>HTML has a defined set of tagnames (also called keywords)that the browser understands.
- 32.The essential elementtagsPrimaryStructurehtmlheadbodyHeadElementstitlemetalinkStructuralElements(block)pbrh1–h6 ulolaimgFormattingElements(inline)emistrongbqblockquote(span)
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.Anatomy of anElement<htmllang=”en”></html>Most elements can have attributes,which provides additionalinformation about the element.
- 53.Anatomy of anElement<divclass=”left-nav”></div>Attributes always follow the sameformat: name=”value”. You canuse either single or doublequotes.
- 54.The essentialattributeslink <linkrel=”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>
- 55.
- 56.
- 57.A stylesheet isa set of rules defininghow an html element will be“presented” in the browser.These rules are targeted tospecific elements in the htmldocument.TheStylesheet
- 58.The “cascade” partof CSS is a set ofrules for resolving conflicts with multipleCSS rules applied to the same elements.For example, if there are two rulesdefining the color or your h1 elements,the rule that comes last in the cascadeorder will “trump” the other.The Cascade
- 59.BrowserstylesheetLinked (external) stylesheetEmbedded(internal)stylesheet Inline (internal)lowimportancehighimportance
- 61.Most elements willinherit many styleproperties from their parent elements bydefault.HTML<body><div><ul><li></li></ul></div></body>relationshipparentparentparentof siteof ul and li, childof li, child ofdivof bodyand bodychild of ul, div, and bodyInheritance
- 62.bodymake the paragraph16px, Verdana,redpmake the paragraph blue16px, Verdana,blueInheritance
- 63.Shortly after stylingyour first html elements,you will find yourself wanting more controlover where your styles are applied.This is where specificity comes in.Specificity refers to how specific your selectoris in naming an element.Specificity
- 64.bodymake the paragraph16px, Verdana, redpmake the paragraph bluep.pinkmake the paragraphpinkSpecificity
- 65.HTML<div id=”plan-2323”>is sometext.</p>this text.</p><p>Here<p>Hide<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}
- 67.CSS SyntaxSyntax =the rules for how to write thelanguage
- 68.Three terms fordescribing yourstyles:CSS ruleCSSselectorCSSdeclaration
- 69.Every style isdefined by a selector anda declaration. The declaration contains atleast one property/value pair.Together theyare called a CSS Rule.selector {property: value;}declarationCSS Rule
- 70.body {font-family: Arial,Helvetica}p {color: #666666}h1 {font-size: 24px}a{color: blue}The selector associates css ruleswith HTML elements.CSSSelector
- 71.p {color: red}Theselector is typed in front of thedeclaration, with a space separating it and theopening curly-bracket (aka curly-brace).Typically, extra spaces and returns are addedas shown for the sake of readability.CSSSelector
- 72.h1,h2,h3,h4 {font-weight: bold}Youcan apply styles to multiple selectors inthe same rule by separating the selectors withcommas.CSSSelector
- 73.p {property: value}Thedeclaration is always defined in aproperty/ value pair. The two are separated bya colon.How you define the properties will affecthow HTML elements are displayed.CSSDeclaration
- 74.p {font-family: Arial,sans-serif;font-size: 14px;color: #666666;}You can apply multiple declarations to aselector(s) by separating the delcarationswith semi-colons.CSSDeclaration
- 75.
- 76.p Type (element)#ID. Class
- 77.body {declaration}p {declaration}h1{declaration}ul {declaration}The simplest selector is the type selector,which targets an html element by name.Type (element) Selectors
- 78.
- 79.
- 80.The essential selectortypes(elements)Primary Body FormattingStructure Elements Elementshtml p embody br ih1 – h6 strongul bol qa blockquoteimg spandiv
- 81.CSS#logo {declaration}HTML<img id=”logo”src=”” alt=””>An ID is an html attribute that is added toyour html markup. You reference that ID inyour css with a hash.IDSelectors
- 82.
- 83.
- 84.CSS.ingredients {declaration}HTML<ul class=”ingredients”>Aclass is an html attribute that is added toyour html markup. You reference that ID inyour css with a period.ClassSelectors
- 85.
- 86.
- 87.IDs vsClassesThe mostimportant difference betweenIDs and classes is that there can be onlyone ID on a page, but multiple classes.An ID is more specific than a class.An element can have both an IDand multiple classes.
- 88.IDs vsClassesID: #344-34-4344Class:MaleClass: EmployeeID: #123-54-9877Class: FemaleClass: Employee
- 89.
- 90.
- 91.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,the style is targeted to an element with theclass “author” inside the id “sidebar”.
- 92.
- 93.
- 94.Multiple classesCSS.ingredients.time {declaration}time”>HTML<divclass=”ingredients<h1></h1></div>Elements can have multiple classes, givingyou more control. The are written in the CSSin the exact order they appear in the html,with no spaces.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.Bootstrap is Front-endFrameworkHTML, CSS, and JS framework fordeveloping responsive, mobile first projects on theweb.www.getbootstrap.com
- 110.Bootstrap is Ready-to-useWeb ElementsHTML / CSS elements for button, form,table, image, navbar, label, progress bar,alert etc.
- 111.
- 112.more EXAMPLESof BootstrapElements
- 113.Websites created byBootstraphttp://unroll.me
- 114.Websites created byBootstrapwww.fliplingo.com
- 115.Why Bootstrap?● Save100+ hours of coding● Easy to use web elements● Quick responsive prototype /website● Great documentation
- 116.Bootstrap Package● CSS- bootstrap.css● JS - bootstrap.js● Icon Fonts - glyphicons-halflings-regular.ttf
- 117.
- 118.
- 119.
- 120.What is Gridin web design?
- 121.12GridWhat is Gridin web design?1 2 3 4 5 6 7 8 9 10 11 12
- 122.4 Grids x3Columns= 12 GridsWhat is Grid in web design?1 2 3 4 5 6 7 8 9 10 11 124 Grid 4 Grid 4 Grid
- 123.
- 124.Grid Overlayfor Bootstrap& Foundationhttp://bit.ly/grid-overlay
- 125.4 Sizes ofBootstrap GridSize Name Screen Size CSS 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(Large screendesktop)1200px + .col-lg-1 ~ .col-lg-12
- 126.4 Sizes ofBootstrap GridSize Name Screen Size CSS 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(Large screendesktop)1200px + .col-lg-1 ~ .col-lg-12
- 127.How many gridsin each box?Bootstrap Grid Examplehttp://bit.ly/bs-agency
- 128.Bootstrap Grid Example4grids x 3 Columns
- 129.
- 130.
- 131.Bootstrap Grid Example2How many grids in each box?
- 132.Bootstrap Grid Example26 grids x 2 Columns
- 133.
- 134.
- 135.Bootstrap Row1 Row= 12 Grids
- 136.
- 137.
- 138.
- 139.Bootstrap Responsive GridColumnswill stack when responsive
- 140.Bootstrap Responsive Grid12 3 123DesktopMobileColumns stack on mobile
- 141.Bootstrap Grid Workshop3Easy Steps:1. Addcontainer2. Add row3. Add columns
- 142.