DOCSLIB.ORG

HTML5, HTML and CSS Course- Level 2

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
HTML5, HTML and CSS Course- Level 2 HTML5, HTML and CSS Course- Level 2 By High School Technology Services myhsts.org Thinking Inside the Box By High School Technology Services myhsts.org Elements as Boxes ▪ All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. ▪ The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model: Elements as Boxes Elements as Boxes ▪ Content - The content of the box, where text and images appear ▪ Padding - Clears an area around the content. The padding is transparent ▪ Border - A border that goes around the padding and content ▪ Margin - Clears an area outside the border. The margin is transparent The box model allows us to add a border around elements, and to define space between elements. E.g. - div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; } Elements as Boxes ▪ In order to set the width and height of an element correctly in all browsers, you need to know how the box model works. ▪ Assume we want to style a <div> element to have a total width of 350px: ▪ The total width of an element should be calculated like this: Total element width = width + left padding + right padding + left border + right border + left margin + right margin ▪ The total height of an element should be calculated like this: Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin 320px (width) + 20px (left + right padding) + 10px (left + right border) + 0px (left + right margin) = 350px Elements as Boxes ▪ What if these values are undeclared? ▪ If padding or borders are undeclared, they are either zero (likely if you are using a css reset) or the browser default value (probably not zero especially on form elements that are commonly not reset). ▪ If the width of a box is undeclared (and the box is a block level element), things get a little weirder. Elements as Boxes The lesson here being that the default width of a box isn't really 100% but a less tangible "whatever is left". Padding The padding property sets the padding space on all sides of an element. It is a shorthand to avoid setting each side separately (padding-top, padding-right, padding-bottom, padding-left). ▪ Initial value - as each of the properties of the shorthand is zero. ▪ Instead we can do – ▪ padding: 5%; /* on all sides 5% padding */ ▪ padding: 10px 20px; /* top and bottom 10px padding */ /* left and right 20px padding */ ▪ padding: 10px 3% 20px; /* top 10px padding */ /* left and right 3% padding */ /* bottom 20px padding*/ ▪ padding: 1em 3px 30px 5px; /* top 1em padding */ /* right 3px padding */ /* bottom 30px padding */ /* left 5px padding */ Margins The margin CSS property sets the margin for all four sides. It is a shorthand to avoid setting each side separately with the other margin properties: margin-top, margin-right, margin-bottom and margin-left. ▪ Initial value - as each of the properties of the shorthand is zero. ▪ Instead we can do – ▪ margin: 10px; /* all sides 10px margin */ ▪ margin: 10px 3px 30px 5px; /* top 10px, right 3px, bottom 30px, left 5px margin */ ▪ margin: auto; /* box is horizontally centered, 0 margin on top and bottom */ Borders The border CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. border can be used to set the values for one or more of: border-width, border-style, border-color E.g. – border: 1px; border: 2px dotted; border: dashed black; Looking Forward We will learn about Floating and Positioning of elements in the next session. We will cover - ▪ Normal Flow ▪ Floating ▪ Positioning Basics ▪ Relative Positioning ▪ Absolute Positioning ▪ Fixed Positioning Thank You. By High School Technology Services myhsts.org.
Load more

Recommended publications
  • Introduction to HTML/CSS/SVG/D3
    D3 Tutorial Introduction of Basic Components: HTML, CSS, SVG, and JavaScript D3.js Setup Edit by Jiayi Xu and Han-Wei SHen, THe OHio State University HTML - Hyper Text Markup Language • HTML is the standard markup language for creating Web pages • HTML describes the structure of Web pages using markup • HTML elements • HTML elements are the building blocks of HTML pages • represented by tags • Tags • HTML tags label pieces of content such as • <head> tag for “heading” • <p> for “paragraph” • <table> for “table” and so on • Browsers do not display the HTML tags, but use them to render the content of the page HTML - Plain Text • If we display the information only by plain text HTML Basics HTML is designed for marking up text by adding tags such as <p> to create HTML elements. Example image: HTML - Codes and the Result HTML - DOM • When a web page is loaded, the browser creates a Document Object Model of the page • The HTML DOM model is constructed as a tree of Objects HTML - DOM Document Root element: <html> Element: Element: <head> <body> Element: Element: Element: Element: <p> Element: <p> <title> <h1> <img> "to create Text: "HTML Text: "HTML Element "is designed Element: "by adding Element Element: Attribute: Attribute: HTML Tutorial" Basics" <strong> for" <em> tags such as" <code> <strong> "src" "style" elements. " "marking up “Example "HTML" "<p>" text" image” HTML - DOM • With the object model, JavaScript can create dynamic HTML by manipulating the objects: • JavaScript can change all the HTML elements in the page • Change all the
    [Show full text]
  • 5 Parts 3 Ways to Include CSS CSS Rule Color Model Font CSS Box
    Border-style: solid/douBle min-height, max-height, height CSS3 Border-color width: 1000% loat, clear cornerstone Border-width (create arrow) text-align (left, justify, right) 5 parts Border-image overPlow, overPlow-x, overPlow-y 1. Page layout Border-radius (circle, eclipse, prove) visible, hidden, scroll, auto 2. Element styles Page layout 3. Element position Examples of Block, inline, inline-block overPlow for Ploat child cornerstone loat, inline-block cornerstone 4. Responsive design elements column-count, column-gap 5. Animation Box-shadow display cornerstone CSS selectors 3 ways to include CSS inline, inline-block, Block, none list-style Syntax examples: Inline / Embedded / External Border-collapse (for taBle) *, tag, #id, .class default width/height for each type background image s1, s2 (select all s1 and all s2) set width/height for each type background-image: url(…) s1 s2, s1>s2, s1+s1, s1~s2 CSS rule visibility Background-image: url(…), url(…) [att], [attr=”val”] Selector, Property, Value :active, :focus, :hover, Box-sizing cornerstone background-repeat:no-repeat ::after, ::before Color model Background-repeat:no-repeat, repeat :required, color How margin and padding work for Background-position :Pirst-child, :last-child, Background-color: linear-gradient(to inline, inline-block and Block elements top, right, Bottom, left :nth-child(n), :nth-last-child(n) Bottom right, red, Blue) center ::Pirst-letter, ::Pirst-line, :root rgB,rgba,hex,hsl,name How margin works when set width :not(selector) Background-size opacity margin: collapse, negative auto, cover, contain CSS speciPicity Element styles Background-attachment 1. !important > inline style > id Font scroll, local, ixed selector > pseudo class > class or font-family (5 basic fonts, typography) cursor attribute selector > tag font-size (px, %, em, rem) outline 2.
    [Show full text]
  • Understand the CSS Box Model
    Concordia University SOEN 287: Web Programming 1 – Winter 2016 Assignment 2 ______________________________________________________________________________ Due Date: By 11:55pm Sunday February 14, 2016 Evaluation: 4% of final mark Late Submission: none accepted Type: Individual Assignment Purpose: The purpose of this assignment is to have you practice cascade style sheets and HTML5 tags. CEAB Attributes: This assignments is primarily evaluating your use of the CSS and the HTML5 tags (Use of engineering tools) ______________________________________________________________________________ Exercise 1: Understand the CSS box model The image below illustrates the CSS box model: Figure 1. The CSS Box Model Please use the <div> to implement a page illustrated below. 1) You can use any color combinations for the border and the background; 2) you can decide the width of the paragraph in the border; 3) when you resize the browser window, the text are automatically wrapped. Figure 2. A sample page Exercise 2: Pseudo Class Selector and Navigation Bar Use <list> to create a vertical “navigation bar”. “Home” is the current page (active), with a green background color and a white text. The other non-active items have a grey background and a white text. When mouse is over a non-active item, the text changes to white with black background. Figure 3 is a demo. Figure 3. A sample page of navigation bar Exercise 3 On a single HTML page, include the following two div container elements in the body. Using an external style sheet, add style to the div elements such that one div has some overlap with the second div (Hint: make use of relative or absolute positioning).
    [Show full text]
  • Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
    Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification W3C Recommendation 07 June 2011, edited in place 12 April 2016 to point to new work This version: http://www.w3.org/TR/2011/REC-CSS2-20110607 Latest version: http://www.w3.org/TR/CSS2 Previous versions: http://www.w3.org/TR/2011/PR-CSS2-20110412 http://www.w3.org/TR/2008/REC-CSS2-20080411/ Latest editor's draft: http://dev.w3.org/csswg/css2/ Editors: Bert Bos <BERT @w3.org> Tantek Çelik <TANTEK @cs.stanford.edu> Ian Hickson <IAN @hixie.ch> Håkon Wium Lie <HOWCOME @opera.com> Please refer to the errata for this document. This document is also available in these non-normative formats: plain text, gzip'ed tar file, zip file, gzip'ed PostScript, PDF. See also translations. Copyright © 2011 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C LIABILITY, TRADEMARK AND DOCUMENT USE rules apply. Abstract This specification defines Cascading Style Sheets, level 2 revision 1 (CSS 2.1). CSS 2.1 is a style sheet language that allows authors and users to attach style (e.g., fonts and spac- ing) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS 2.1 simplifies Web authoring and site maintenance. CSS 2.1 builds on CSS2 [CSS2] p. 284 which builds on CSS1 [CSS1] p. 283. It supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc. It also sup- ports content positioning, table layout, features for internationalization and some properties related to user interface.
    [Show full text]
  • HTML5 and CSS3 Illustrated
    HTML5 and CSS3 Illustrated Unit H: Implementing Page Layout with HTML and CSS Objectives Assess the CSS box model Construct a multicolumn layout with float Implement relative positioning Implement absolute positioning HTML 5 and CSS 3 – Illustrated Complete 2 Objectives (continued) Stack elements Create a multicolumn layout using positioning Create a fluid layout Control the visibility of elements HTML 5 and CSS 3 – Illustrated Complete 3 Assessing the CSS Box Model Box model: used by CSS to represent characteristics of every Web page element Ø Treats element as rectangular box Border: border surrounding element Margin: space from border to neighboring/parent element Padding: space between border and element content HTML 5 and CSS 3 – Illustrated Complete 4 Assessing the CSS Box Model (continued) Size of padding, margin, and border increase the amount of space occupied by an element Ø Dimensions of these properties not included in specified width / height • Specified width and height refer only to the content of an element When fitting elements into limited space, subtract padding, margin, and border area to get width or height HTML 5 and CSS 3 – Illustrated Complete 5 Assessing the CSS Box Model (continued) When bottom margin of one element is adjacent to top margin of another, the margins combine to the size of the larger of the two Ø Affects element size planning Separate property for each side of padding and margin Ø e.g., padding-top:2px; margin-right:1em; HTML 5 and CSS 3 – Illustrated Complete 6 Assessing the CSS Box Model (continued) Can set a common value using generic property Ø e.g., padding:0; Can use shorthand to set different values.
    [Show full text]
  • Learning XML.Pdf
    Learning XML Erik T. Ray First Edition, January 2001 ISBN: 0-59600-046-4, 368 pages XML (Extensible Markup Language) is a flexible way to create "self-describing data" - and to share both the format and the data on the World Wide Web, intranets, and elsewhere. In Learning XML, the author explains XML and its capabilities succinctly and professionally, with references to real-life projects and other cogent examples. Learning XML shows the purpose of XML markup itself, the CSS and XSL styling languages, and the XLink and XPointer specifications for creating rich link structures. Release Team[oR] 2001 Preface 1 What's Inside Style Conventions Examples Comments and Questions Acknowledgments 1 Introduction 5 1.1 What Is XML ? 1.2 Origins of XML 1.3 Goals of XML 1.4 XML Today 1.5 Creating Documents 1.6 Viewing XML 1.7 Testing XML 1.8 Transformation 2 Markup and Core Concepts 25 2.1 The Anatomy of a Document 2.2 Elements: The Building Blocks of XML 2.3 Attributes: More Muscle for Elements 2.4 Namespaces: Expanding Your Vocabulary 2.5 Entities: Placeholders for Content 2.6 Miscellaneous Markup 2.7 Well-Formed Documents 2.8 Getting the Most out of Markup 2.9 XML Application: DocBook 3 Connecting Resources with Links 60 3.1 Introduction 3.2 Specifying Resources 3.3 XPointer: An XML Tree Climber 3.4 An Introduction to XLinks 3.5 XML Application: XHTML 4 Presentation: Creating the End Product 88 4.1 Why Stylesheets? 4.2 An Overview of CSS 4.3 Rules 4.4 Properties 4.5 A Practical Example 5 Document Models: A Higher Level of Control 119 5.1 Modeling
    [Show full text]
  • IT2353 WEB TECHNOLOGY SCE Department of Information
    IT2353 WEB TECHNOLOGY A Course Material on Web Technology By Mrs.S.SHARMILA ASSISTANT PROFESSOR DEPARTMENT OF INFORMATION TECHNOLOGY SASURIE COLLEGE OF ENGINEERING VIJAYAMANGALAM – 638 056 SCE Department of Information Technology IT2353 WEB TECHNOLOGY QUALITY CERTIFICATE This is to certify that the e-course material Subject Code : IT2353 Subject : Web Technology Class : III Year IT being prepared by me and it meets the knowledge requirement of the university curriculum. Signature of the Author Name: S.SHARMILA Designation: AP/IT This is to certify that the course material being prepared by Mrs.S.SHARMILA is of adequate quality. She has referred more than five books amount them minimum one is from aboard author. Signature of HD Name: S.ASHOK KUMAR SEAL SCE Department of Information Technology IT2353 WEB TECHNOLOGY IT2353 WEB TECHNOLOGY SYLLABUS UNIT I 9 Web Essentials: Clients, Servers, and Communication. The Internet-Basic Internet Protocols The World Wide Web-HTTP request message-response message-Web Clients Web Servers-Case Study. Markup Languages: XHTML.An Introduction to HTML History-Versions-Basic XHTML Syntax and Semantics-Some Fundamental HTML Elements-Relative URLs-Lists-tables-Frames- Forms-XML Creating HTML Documents CaseStudy. UNIT II 9 Style Sheets: CSS-Introduction to Cascading Style Sheets-Features-Core Syntax-Style Sheets and HTML Style Rle Cascading and Inheritance-Text Properties-Box Model Normal Flow Box Layout-Beyond the Normal Flow-Other Properties-Case Study. Client- Side Programming: The JavaScript Language-History and Versions Introduction JavaScript in Perspective-Syntax Variables and Data Types-Statements-Operators- Literals-Functions-Objects-Arrays-Built-in Objects-JavaScript Debuggers. UNIT III 9 Host Objects : Browsers and the DOM-Introduction to the Document Object Model DOM History and Levels-Intrinsic Event Handling-Modifying Element Style-The Document Tree- DOM Event Handling-Accommodating Noncompliant Browsers Properties of window-Case Study.
    [Show full text]
  • Javascript, HTML and CSS Web Development CODICE MOC40410 DURATA 2 Gg PREZZO 700,00 € EXAM
    JavaScript, HTML and CSS Web Development CODICE MOC40410 DURATA 2 gg PREZZO 700,00 € EXAM DESCRIZIONE This course introduces HTML, JavaScript and CSS as programming and markup languages that are used to create web applications. The learner will gain experience with each language individually and then combine them together to create compelling web application solutions. The learner will have an opportunity to use Visual Studio Code on their operating system of choice to create and test their web applications. This course teaches basic tasks that are necessary to create web applications with a strong semantic structure, re-usable style components and custom interactive features. This course includes hands-on labs that enables the learner to build basic HTML pages that are the components of a web application used to solve real world problems. OBIETTIVI RAGGIUNTI • Explore the historical context and justification for HTML • Create HTML5 documents • Use HTML elements to add content to a HTML page • User hyperlinks to connect various HTML pages together • Capture user input using forms • Create content using HTML5 semantic elements • Create SVG Graphics • Create CSS stylesheets • Author sophisticated CSS rule sets and selectors • Lay out HTML elements using CSS margin and padding • Implement program logic using JavaScript • Leverage HTML5 APIs using JavaScript • Implement advanced web applications using jQuery, AngularJS, Bootstrap, TypeScript or Sass TARGET The target audience for this training course is individuals who are interested in learning about the core skills necessary for web development. This course is intended for individuals of all levels. Some light experience Pagina 1 di 4 with software development is helpful but not necessary.
    [Show full text]
  • The CSS Box Model
    The CSS Box Model Practical Exercises Overview The CSS Box Model is fundamental to understanding how to use the range of page layout tools that CSS has to offer. By treating all page elements as boxes with dimensions, borders, padding, margins and position, CSS allows the page to be broken down into layout components which may be independent of the content they contain. Information At the end of these tasks you should be able to: Apply borders, margins and padding to elements in an HTML page Centre content in a web page using CSS Use box properties to format other HTML element What you will need to use these materials You only need a text-file editor and a current web browser to start adding CSS to XHTML documents. The exact type(s) and version(s) available to you will depend on your local set up. Common operating system default editors are Notepad (Windows) and TextEdit (MacOSX) and Gedit (Linux). Suitable web browsers include Mozilla Firefox, Google Chrome, Apple Safari and Microsoft Internet Explorer. © Copyright information and licensing This material from JISC Netskills Share is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. http://creativecommons.org/licenses/by-nc-sa/3.0/ You are free to download, embed, adapt and share this material within the terms of that license. Find out more at: http://www.netskills.ac.uk/share Contents 1. Getting Started 4 2. The CSS Box Model 6 3. Margins 9 4. Width and Centring Content 11 5. Borders 15 6. Padding 17 7.
    [Show full text]
  • Web for Everyone Web on Everything Knowledge Base Trust And
    newsletter http://www.w3c.nl Nieuwsbrief maart 2012 Editorial Al jarenlang pleit W3C en met name Tim Bernes Lee voor het openbaar maken van gegevens via Edithet web. Steeds meer overheden geven gehoor aan deze oproep en stellen Open Data via het web beschikbaar. "Onze" vicevoorzitter van de Europese Commissie Neelie Kroes noemt drie redenen waarom open data belangrijk is: het bevordert de ontwikkeling van nieuwe bedrijven, bevordert transparantie van de overheid en leidt tot meer evidence-based beleid. In juni zal een workshop plaatsvinden waar de aandacht gericht is op het gebruik van al deze gegevens (zie "W3C Workshop - Using Open Data: policy modeling, citizen empowerment, data journalism"). Via het web vindt veel uitwisseling van media plaats. Vaak is dat in de vorm van video. Niet altijd is daarbij het gehele bestand nodig, maar is er interesse in slechts een deel van het mediabestand. Media files zijn in het algemeen grote tot zeer grote bestanden. Door fragmenten daarvan aan te kunnen vragen wordt de interactiviteit van applicaties verbeterd en het dataverkeer efficiënt gebruikt (zie "Call for Review: Media Fragments URI 1.0 (basic)"). De komende maand vindt, dit keer in Lyon, de jaarlijkse World Wide Web conferentie plaats. Uiteraard een aanrader voor iedereen die professioneel of vanuit persoonlijke belangstelling met het web te maken heeft (zie "W3C breidt aanwezigheid op WWW 2012 uit"). Fons Kuijk Nieuwsbrieven worden met regelmaat door het W3C Benelux Kantoor uitgegeven. Ze bevatten het laatste nieuws over W3C activiteiten en evenementen die door of in samenwerking met het W3C Benelux Kantoor worden georganiseerd. Aanmelden of afmelden voor deze nieuwsbrief kan via een bericht naar: [email protected].
    [Show full text]
  • Rob Crowther
    A user-friendly reference guide HTML5 & CSS3 Rob Crowther MANNING www.allitebooks.com Hello! HTML5 & CSS3 www.allitebooks.com www.allitebooks.com Hello! HTML5 & CSS3 A user-friendly reference guide Rob Crowther MANNING SHELTER ISLAND www.allitebooks.com For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact: Special Sales Department Manning Publications Co. 20 Baldwin Road PO Box 261 Shelter Island, NY 11964 Email: [email protected] ©2013 by Manning Publications Co. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps. User Friendly artwork, characters, and strips used by permission from UserFriendly.Org. All Rights Reserved. Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is
    [Show full text]
  • Using Cascading Style Sheets (CSS) Technology
    2Lesson 2: Using Cascading Style Sheets (CSS) Technology Objectives By the end of this lesson, you will be able to: 2.1: Explain the function and purpose of the Cascading Style Sheets (CSS) technology. 2.2: Explain the importance of using style guides when designing sites and documents. 2.3: Define common CSS terms and syntax. 2.4: Apply CSS styles to format pages. 2.5: Develop and apply page layouts with CSS. 2.6: Use CSS to position content and apply document flow. 2.7: Define common CSS positioning schemes. 2.8: Use the CSS Box Model. 2-2 Advanced HTML5 and CSS3 Specialist Pre-Assessment Questions 1. In CSS, what is the name for a selector, property and value all grouped together? a. Declaration b. Tag c. Structure d. Rule 2. In a CSS style sheet, which of the following determines the image behind the contents of a page? a. The background-image property b. The background attribute of the <body> tag c. The background-image selector in the <body> tag d. The img property 3. What is liquid layout? © 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0 Lesson 2: Using Cascading Style Sheets (CSS) Technology 2-3 Cascading Style Sheets (CSS) OBJECTIVE As a Web designer, you know that there is more to creating a good Web page than posting 2.1: CSS technology good written content and images. Most users have multiple sites to choose from when they are searching the Web for something, whether it is information, entertainment or products. If several reputable sites offer the same content and are easy to use, then which one will users prefer? Quite often, it will be the one that looks the best.
    [Show full text]