COMP 1234 - Introduction to Web Development: Lecture Slides PDF

COMP 1234 Lecture 1 –Introduction to web development Agenda ◎ A brief history of the Intranet ◎ How web applications work ◎ Introduction to HTML, CSS, JavaScript ◎ Tools for Web Development – Webstorm ◎ What is a web server? ◎ What is HTTP ◎ What is FTP ◎ Client / Server Communications ◎ How web browsers interpret HTML/CSS/JavaScript 2 A brief history of the Internet The internet began First Browser was ARPANET Email was created (‘71) First Virus was sent published Wifi was established Google is founded (‘98) 1960s 1970s 1980s 1990s NOV 2022+ FTP & TCP/IP Created Online Shopping was The speed of the intranet The internet started to ebay is founded (‘95) Internet Today (‘70-71) invented (‘79) was developed (‘86) become world wide 3 How web applications work 4 How web applications work 5 The architecture of the Intranet ◎ A web application consists if clients, a web server and a network. ◎ The clients use programs (web browsers) to request web pages from a web server. ◎ The web server returns the pages that are requested back to the client browsers 6 The architecture of the Intranet Term Description LAN Local Area Network, directly connects computers that are near to each other (often referred to an intranet connection) WAN Wide Area Network, consists of two or more LANs that connected by routers. The routers route information from one network to another. IXP The Internet consists of many WANs that have been connected at Internet Exchange Points (IXPs). There are several dozen IXPs located throughout he world. ISP An Internet service provider (ISP) owns a WAN and leases access to its network. It connects its WAN to the rest of the Internet at one or more IXPs 7 Static Web Pages A static web page is an HTML (mark-up language) document that’s stored on a web server and does not change. The html files (.html or.htm extensions) are examples of static web pages. 8 How a web server processes a Static Web Page 9 Dynamic Web Pages A dynamic web page is a web page whose construction is controller by an application server, processing server side code. The parameters passed to the server, determine how the aseembly of the page is determined. 10 How a web server processes a Dynamic Web Page 11 Introduction to HTML, CSS, JavaScript 12 HMTL – Hypertext Markup Language The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScripthelp an application run more efficiently. 13 CSS Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. 14 JavaScript JavaScript is client-side scripting language that is run by the JavaScript engine of a web browser When a browser requests an HTML page that contains JavaScript or a link to a JavaScript file, both the HTML and the JavaScript are loaded into the browser Because JavaScript runs on the client, not the server, it provides functions that don’t require a trip back to the server. This can help an application run more efficiently. 15 Tools for Web Development 16 Webstorm / Atom / Visual Studio Code WebStorm, Visual Studio code and Atom are all integrated development environment for HMTL, CSS and JavaScript and related technologies. Like most IDEs, there job is to make your development experience more enjoyable, automating routine work and helping you handle complex tasks with ease. 17 Webstorm Though Ultimately the choice of IDE is up to you, the editor of choice for lecture in this course will primarly be WebStorm 18 Any questions? 19 COMP 1234 Lecture 2 – Introduction to Web Development Agenda ◎ What is a web server? ◎ What is HTTP ◎ What is FTP ◎ Client / Server Communications ◎ How web browsers and servers exchange HTML/CSS/JavaScript 2 Client / Server Communication Model 3 Client/Server Communication Model Client/Server communication involves two components, namely a client and a server. They are usually multiple clients in communication with a single server. The clients send requests to the server and the server responds to the client requests 4 Client/Server Communication Model Client machines are the desktops, Server machines hosts web applications, laptops, smart phones, and tablets you stores user and program see everywhere. data, and performs security authorization tasks Broad range of specifications regarding Powerful machines to handle high traffic operating system, and bandwidth. processing speed, screen size, The essential characteristic of a server is available memory, and that it is listening for requests, and storage upon getting one, responds with a message. 5 Client/Server in the Web 6 The Web Protocol, File Transfers 7 Internet Protocols ◎ A protocol is a set of rules that partners use when they communicate. ◎ TCP/IP, is an essential internet protocol! ◎ These protocols have been implemented in every operating system and make fast web development possible. If web developers had to keep track of packet routing, transmission details, domain resolution, checksums, and more, it would be hard to get around to the matter of actually building websites. 8 Uniform Resource Locators (URL) Uniform Resource Locators (URL) allow clients to request particular resources (files) from the server. URL’s consist of two required components: 1. the protocol used to connect and 2. the domain (or IP address) to connect to. 9 Uniform Resource Locators (URL) Optional components of the URL are: ◎ the path (which identifies a file or directory to access on that server), ◎ the port to connect to, ◎ a query string, and ◎ a fragment identifier 10 HyperText Transfer Protocol ◎ HTTP is the protocol of the web. ◎ HTTP establishes a TCP connection on port 80 (default). The server waits for the request, and then responds with a: ○ Headers, ○ Response code, ○ an optional message (which can include files) ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 11 HTTP Headers Headers are sent in the request from the client and received in the response from the server. Headers are one of the most powerful aspects of HTTP and unfortunately, few developers spend any time learning about them. ◎ Request headers include data about the client machine ○ Host, User-Agent, Cache settings and more ◎ Response headers have information about the server answering the request and the data being sent ○ Server, Last Modified, Content Type, Encoding 12 HTTP Request Methods ◎ The most common requests are the GET and POST request, along with the HEAD request ◎ PUT and DELETE requests when creating an API in Node (future courses). ◎ Other HTTP verbs such as CONNECT, TRACE, and OPTIONS are less commonly 13 GET Request ◎ The most common type of HTTP request is the GET request. ◎ One is asking for a resource located at a specified URL to be retrieved. ◎ Whenever you click on a link, type in a URL in your browser, or click on a bookmark, you are usually making a GET request. ◎ Data can be transmitted through a GET request, with a query string ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 14 POST Request ◎ The other common request method is the POST request. ◎ This method is normally used to transmit data to the server using an HTML form ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 15 What is a web server? ◎ A web server is, at a fundamental level, nothing more than a computer that responds to HTTP requests. ◎ Real-world websites typically have many web servers configured together in web farms. ◎ Regardless of the physical characteristics of the server, one must choose an application stack to run a website. This application stack will include ○ an operating system, ○ web server software, ○ a database, and ○ a scripting language to process dynamic requests. 16 What is HTTP? The Hypertext Transfer Protocol (HTTP) is what allows your browser to communicate with a server and get information from the Internet. It is the foundation of how we browse the web, and it's essential for you to understand this protocol in order to build websites or apps that do anything other than display static content 17 What is FTP? File Transfer Protocol Server is a computer that provides file storage and access services on the Internet. They provide services in accordance with the FTP protocol. FTP, the file transfer protocol is a set of standard protocols for file transfer on the network, using the client/server model. FTP is a protocol specifically used to transfer files. 18 How to Browsers Interpret HTML/CSS and JavaScript? 19 Web Browsers ◎ The user experience for a website is unlike the user experience for traditional desktop software. ◎ Users do not download software; they visit a URL, which results in a web page being displayed. ◎ Although a typical web developer might not build a browser, or develop a plugin, they must understand the browser’s crucial role in web development. 20 Web Browsers – Fetching a Web Page ◎ Seeing a single web page is facilitated by the browser, which ○ requests the initial HTML page, then ○ parses the returned HTML to find all the resources referenced from within it (like images, style sheets, and scripts). ◎ Only when all the files have been retrieved is the page fully loaded for the user ◎ A single web page can reference dozens of files and requires many HTTP requests and responses. 21 Fetching a Web Page Diagram ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 22 Any questions? 23 COMP 1234 Lecture 3 – HTML/CSS Basics Agenda Directories and File Structures ◎ Relative vs Absolute File Paths ◎ GBLearn Hosting HTML/CSS Basics ◎ HTML Syntax ◎ CSS Syntax ◎ The use of Brackets in HTML/CSS ◎ How to validate HTML/CSS 2 Absolute vs Relative File Paths 3 Absolute Path and Relative URLs When referencing a page or resource When referencing a resource that is on on an external site, a full absolute URL the same server, you can use relative reference is required referencing. ◎ Full URL with a protocol (typically, ◎ If the URL does not include the http:// or https://), the domain “http://” then the browser will name, any paths, and the file name request the current server for the of the desired resource. file. 4 Absolute Path An absolute path is a path that describes the location of a file or folder regardless of the current working directory; in fact, it is relative In Windows Environment to the root directory For example D: \documents\mydocument.doc An absolute path contains the full address of the file location to refer to a certain directory in the computer 5 Relative Path A relative path is a path that describes the location of a file or folder in relative to the current working directory. In Windows Environment For example documents\mydocument.doc In simple words, relative path refers to a path relative to the location of the current webpage. 6 Relative Path 1. Same Directory To link to a file within the same folder, simply use the file name. 2. Child Directory To link to a file within a subdirectory, use the name of the subdirectory and a slash before the file name. 3. Grandchild/Descendant Directory To link to a file that is multiple subdirectories below the current one, construct the full path by including each subdirectory name (separated by slashes) before the file name. 4. Parent/Ancestor Directory Use “../” to reference a folder above the current one. If trying to reference a file several levels above the current one, simply string together multiple “../”. 5. Sibling Directory Use “../” to move up to the appropriate level, and then use the same technique as for child or grandchild directories. 6. Root Reference In this approach, begin the reference with the root reference (the “/”), and then use the same technique as for child or grandchild directories. 7 Absolute vs Relative Path – By Example 8 GBLearn Hosting 9 GBLearn Hosting – What is it? GBLearn site is a learning environment for ◎ George Brown College students. Allows students to gain experience working ◎ on a real server. https://my.gblearn.com/ ◎ 10 GBLearn Hosting Activate Your GbLearn Account ◎ At the beginning of the semester – each student should have received an email that their GBLearn account is ready. (GBLearn Administrator – “Welcome to GbLearn”) ◎ The “Welcome to GBLearn” will contain: ○ a link to activate your account ○ username ○ enter a password / confirm password ◎ After initallly activating your account, you will receive a activation confirmation email ○ The email wiil contain your important FTP account information 11 GBLearn Hosting Connecting to your GBLearn Account ◎ To access your GBLean Account, you will need an FTP client ◎ The recommended FTP Client is FileZilla ○ https://filezilla-project.org/download.php?platform=win64 ◎ To login to your GBLearn account, using Filezilla, you will need 3 pieces of information 1. Hostname 2. Username 3. Password 12 GBLearn Hosting Connecting to your GBLearn Account 1. Open yoru FTP Filezilla Client 2. Enter your FTP Host, Username and Password 3. Click on Quick Connect, it will take a few seconds, then your accout will appear on the right 13 GBLearn Activation and Connection Videos Activation ◎ https://www.loom.com/share/4bbd066b491340d0844368132b3ea2e9 Connecting ◎ https://www.loom.com/share/80a7437f1dd44ae4bb019c6a462a1981 14 HTML Basics 15 A simple HTML5 Document 16 Working with HTML Tags Opening and Closing Tags Empty Tags 17 Correct and Incorrect nesting Tags Correct Nesting Incorrect Nesting 18 Opening Tag with Attributes An Opening tag with one Attribute Opening Tag with three Attributes 19 Boolean Attribute How to code a Boolean attribute NOTES Boolean attributes represents either an ON or OFF value (TRUE or FALSE) Boolean attributes can be coded as just the attribute name (often do not require assignment variable). 20 Attributes for Identifying HTML elements An opening tag with an id attribute unique attribute An opening tag with a class attribute shared attribute 21 A document with comments and WhiteSpace HTML comments are text that appear between Web Browsers ignore comments, so you they can used to describe or explain portions of your HTML code. Whitespace is ignored and consists of tab characters, line return characters and extra spaces. Since whitespace characters are ignored, you can use it to indent lines of code etc… this is a code practice to help make you work more legible 22 Cascading Style Sheets Basics (CSS Basics) 23 CSS Style Rule A CSS style rule consists of a selector and zero or more declarations enclosed in braces CSS selectors are identifiers that are coded at the beginning of the style rule A CSS declaration consists of a property, a colon, a value and a semicolon To make your code easier to read, you can use spaces, indentation and blank lines within the style rule 24 CSS Document with Comments CSS comments begin with the characters A CSS comment can span a single in or multiple lines 25 HTML that uses External CSS File To code a selector for an HTML element, you simply name the element. This is referred to as type selector. If an element is coded with an id attribute, you can code a selector for that id by coding a poind sign (#) followed by the id value, as in #copyright If an element is coded with a class attribute, you can code a selector for that class by coding a period followed by the class name, as in.base-color 26 Select Element By Type This is referred to as type selector. 27 Select Element By Id If an element is coded with an id attribute, you can code a selector for that id by coding a pound sign (#) followed by the id value, as in #copyright 28 Select Element By Class If an element is coded with a class attribute, you can code a selector for that class by coding a period followed by the class name, as in.base-color 29 How to Validate HTML/CSS 30 W3C HTML MarkUp Validator http://validator.w3.org/ 31 CSS Validator http://jigsaw.w3.org/css-validator/ 32 Any questions? 33 COMP 1234 Lecture 4 – HTML Structure Agenda ◎ How HTML documents are structured ◎ A tour of the main elements in HTML ◎ The semantic structure of HTML5 2 HTML Syntax 3 HTML Syntax ◎ HTML documents are composed of content and HTML elements. ◎ An HTML element is identified in the HTML document by tags. ○ A tag consists of the element name within angle brackets. ◎ The element name appears in both the opening tag and the closing tag. ◎ HTML elements can also contain attributes. An HTML attribute is a name=value pair that provides more information about the element ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 4 Nested HTML ◎ Often an HTML element will contain other HTML elements. In such a case, the container element is said to be a parent of the contained, or child, element. ◎ Any elements contained within the child are said to be descendants of the parent element; likewise, any given child element may have a variety of ancestors. ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 5 Proper Nesting ◎ In order to properly construct this hierarchy of elements, your browser expects each HTML nested element to be properly nested. ◎ A child’s ending tag must occur before its parent’s ending tag ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 6 Structure of HTML Documents ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 7 DOCTYPE ◎ The DOCTYPE declaration tells the browser what type of document it is about to process. ◎ It does not indicate what version of HTML is contained within the document ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 8 Element HTML5 does not require the use of the , , and elements. However, in XHTML they were required, and most web authors continue to use them. The element is sometimes called the root element as it contains all the other HTML elements in the document. The optional lang attribute tells the browser the language that is being used. ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 9 Element The head contains descriptive elements about the document, such as its title, encoding, and any style sheets or JavaScript files it uses. ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 10 Element The body contains content (both HTML elements and regular text) that will be displayed by the browser. The rest of this chapter and the next chapter will cover the HTML that will appear within the body. ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 11 Tour of HTML Elements 1. Headings. Describes the main structure of document. There are six levels of headings. 2. Paragraphs. The basic unit of text in HTML. As block-level elements, browsers typically add newlines before and after the element. 3. Link. Hyperlinks are essential feature of all web pages and can reference another page or another location in same page. 4. Inline Text Elements. These do not change the flow of text and provide more information about text. 5. Image. Used to display an image by specifying a filename or URL. ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 12 Tour of HTML Elements Continued… 6. Unordered List. Used to display a bulleted list. Within a list is a collection of list item elements. 7. Division. Container for text or other HTML elements. Like paragraphs, they are also block-level elements. 8. Horizontal Rule. Indicates a thematic break in the text. Usually displayed as a horizontal line. 9. Character Entity. The mechanism for including special symbols (such as ©) or characters that have a reserved meaning in HTML. 10.Semantic Block Element. Special containers in HTML5 for describing structural elements in a document. ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 13 HTML in the Browser ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 14 Headings ◎ HTML provides six levels of heading (h1 through h6) ◎ They are an essential way for document authors to show their readers the structure of the document ◎ Headings are also used by the browser to create a document outline for the page. ◎ Choose the heading level because it is appropriate semantically NOT because of its default presentation (e.g., choosing because you want your text to be bold and 16pt). 15 Paragraphs and Divisions ◎ The tag is a container. It can contain HTML and other inline HTML elements ◎ is also a container element The element has no intrinsic presentation or semantic value; ◎ element is used to add a “break” between paragraphs or elements. ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 16 HyperLinks ◎ Links are created using the element (the “a” stands for anchor). ◎ A link has two main parts: the destination and the label. ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 17 Inline Text Elements ◎ inline elements because they do not disrupt the flow of text (i.e., cause a line break). ◎ HTML defines over 30 of these elements. ◎ Table 3.2 lists some of the most commonly used of these elements. 18 Common Text-Level Elements Element Description Element Description Anchor used for hyperlinks Fro displaying the fine-print, that is, “nonvital” text, such as copyright or legal notices An abbreviation The inline equivalent of the element. It is generally used to mark text that will receive special formatting using CSS Line break For content that is strongly important Citation (ie reference to another work) For displaying time and date data Used for displaying code, such as markup or programming code Emphasis For displaying highlighted text 19 Images ◎ Note the key attributes of the element. ◎ Attributes such as title, width, and height are optional ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 20 Character Entities Character entities are special characters for symbols for which there is either no easy way to type them via a keyboard or which have a reserved meaning in HTML (for instance the “” symbols). ◎ They can be used in an HTML document by using the entity name or the entity number 21 Entity Examples 22 HTML Lists Ordered lists Collections of items that have a set order Unordered Lists Collections of items in no particular order Description Lists Collection of name and description/definition pairs. ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 23 HTML Semanitc Structure 24 HTML Semantic Structure ◎ So far, the main semantic elements you have seen are headings, paragraphs, lists, some inline elements and the semantic block element, the division (i.e., element). ◎ HTML5 semantic elements allow to replace some of your sprawl with cleaner and more self-explanatory elements ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 25 HTML Semantic Structure ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 26 HTML Semantic Structure Element Description header The header for page main The main content a page section A generic section of a document that doesn’t indicate the type of content article A composition like an article in the paper nav A section of a page that contains links to other pages or placeholder aside A section of page like sidebar that is related to the content that’s near it footer The footer for page 27 Using Semantic Elements ◎ HTML5 semantic elements do not apply any special presentation giving them great flexibility. ◎ Article and section, for instance, can be used many ways when designing your website. ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 28 Figure and figcaption ◎ The element can be used not just for images but for any type of essential content that could be moved to a different location in the page or document, and the rest of the document would still make sense. Element Description figure An illustration, diagram, photo, code listing or the like that is referred to from the main content of the document. figcaption The caption that identifies a figure ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 29 Details and Summary ◎ The and elements provide a way of semantically relating a summary and a details. ◎ For browsers that support these elements, accordion functionality is included as well (thus no JavaScript programming is required). ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 30 Any questions? 31 COMP 1234 Lecture 5 – Introduction to Cascading Style Sheets (CSS) Agenda ◎ The rationale for CSS ◎ The syntax for CSS ◎ Where CSS styles can be located ◎ The different types of CSS selectors ◎ The CSS Casade 2 What is CSS? ◎ CSS is a W3C standard for describing the appearance of HTML elements. ◎ With CSS, we can assign font properties, colors, sizes, borders, background images, positioning and even animate elements on the page. ◎ CSS can be added directly to any HTML element (via the style attribute), within the element, or, most commonly, in a separate text file that contains only CSS. 3 Why CSS? Improved control over formatting. Improved site maintainability. All formatting can be centralized into one CSS file Improved accessibility. By keeping presentation out of the HTML, screen readers and other accessibility tools work better. Improved page-download speed. Each individual HTML file will contain less style information and markup, and thus be smaller. Improved output flexibility. CSS can be used to adopt a page for different output media. This approach to CSS page design is often referred to as responsive design. 4 Responsive Design Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 5 CSS Syntax 6 CSS Syntax A CSS document consists of one or more style rules. A rule consists of a selector that identifies the HTML element or elements that will be affected, followed by a series of property:value pairs called the declaration The series of declarations is also called the declaration block. ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 7 CSS Syntax: Selector Every CSS rule begins with a selector. The selector identifies which element or elements in the HTML document will be affected by the declarations in the rule. ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 8 CSS Syntax: Properties ◎ Each individual CSS declaration must contain a property ◎ The CSS2.1 recommendation defines over a hundred different property names! ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 9 CSS Syntax: Values Each individual CSS declaration must also contain a value The unit of any given value is dependent upon the property. Some property values are from a predefined list of keywords. Others are values such as length measurements, percentages, numbers without units, color values, and URLs. ◎ Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 10 CSS Syntax: Color Values Method Description Example Name Use one of 17 standard color names. CSS3 has color: red; 140 standard names. color: hotpink; RGB Uses three different numbers between 0 and color: rgb(255,0,0); 255 to describe the red, green, and blue values color: rgb(255,105,180); of the color. Hexadecimal Uses a six-digit hexadecimal number to color: #FF0000; describe the red, green, and blue value of the color: #FF69B4; color RGBa This defines a partially transparent color: rgba(255,0,0,0.5); background color. The “a” stands for “alpha,” which is a term used to identify a transparency HSL Allows you to specify a color using Hue (0 to color: hsl(0,100%,100%); 360 : 0 red, 120 green, 240 blue) Saturation (1% color: hsla(330,59%,100%,0.5); : gray, 100%: full color) and Light values )100% Watch the following video for more detail full white, 0% full black). This is available https://youtu.be/AL6mFBeJ2wM only in CSS3. HSLA is also available as well. 11 CSS: Units of Measure Units of measure in CSS are either relative units, in that they are based on the value of something else, or absolute units, in that they have a real-world size. px this is a relative measure, while in CSS3 it is absolute (1/96 of an inch) Equal to the computed value of the font-size property of the element on which it is used. Relative to the font- em size of the element (2em means 2 times the size of the current font) w3school % A measure that is always relative to another value. (Relative unit) in Inches (Absolute unit) cm centimeters (Absolute unit) 12 CSS Comments It is helpful to add comments to your style sheets. Comments take the form: It is a common practice to locate related style rules together, and then indicate that they are related via a comment. For instance: nav#main { … } nav#main ul { … } nav#main ul li { … } header { … } h1 { … } Comments can also be a helpful way to temporarily hide any number of rules, to help with debugging. 13 Location of Styles: 3 Ways 1. Use an external style sheet by coding a link element in the head section - are style rules placed within an external text file with the.css extension. 2. Embed the styles in the head section - are style rules placed within the element (inside the element of an HTML document) body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; } h1 { font-size: 250%; } 3. Use the style attribute to apply styles to a single element Valley Town Hall 14 The Sequence in which Styles are Applied 1.Inline styles (Highest Priority) 2.Embedded styles Override styles as you move down 3.Styles from an external style sheet 15 CSS Selectors 16 CSS Selectors When defining CSS rules, you will need to use a selector. Selectors tell the browser which elements will be affected by the property values Selectors allow you to select individual or multiple HTML elements. Three basic selector types have been around since the earliest CSS2 specification. 1. Element Selectors 2. Class Selectors (.class) 3. Id Selectors (#) 17 Element Selectors Element selectors select all instances of a p, div, aside { margin: 0; given HTML element. padding: 0; You can also select all elements by using the } universal element selector (*) You can select a group of elements by p{ separating the different element names with margin: 0; commas. padding: 0; } div { margin: 0; padding: 0; } aside { margin: 0; padding: 0; } 18 Class and ID Selectors A class selector allows you to simultaneously An ID selector allows you to target a specific target different HTML elements regardless of element by its id attribute regardless of its their position in the document tree. type or position in the document tree. HTML elements labeled with the same class HTML elements labeled with an id attribute, attribute value, can be targeted for styling by can be targeted for styling by using an id using a class selector, which takes the form: selector, which takes the form: period (.) followed by the class name. pound/hash (#) followed by the id name. 19 Class and ID Selector Example Id selector #first matches the div with id “first” Class selectors.orange and.circle, match all divs with those class values. Notice that an element can be tagged with multiple classes. Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 20 Attribute Selector An attribute selector provides a way to select HTML elements either by the presence of an element attribute or by the value of an attribute. Attribute selectors can be helpful in the styling of hyperlinks and form elements (which come up in the next chapter) These selectors can be combined with the element id and class selectors. 21 Attribute Selectors Matches Example [] A specific attribute. [title] Matches any element with a title attribute [=] A specific attribute with a specific value. a[title="posts from this country"] Matches any element whose title attribute is exactly “posts from this country” [~=] A specific attribute whose value matches at least [title~="Countries"] one of the words in a space-delimited list of Matches any title attribute that contains the word words. “Countries“ [^=] A specific attribute whose value begins with a a[href^="mailto"] specified value. Matches any element whose href attribute begins with “mailto“ [*=] A specific attribute whose value contains a img[src*="flag"] substring. Matches any element whose src attribute contains somewhere within it the text “flag“ More attribute selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors 22 Attribute Selector Example Here we show an attribute selector style links to show PDF files differently Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 23 Pseudo-Element and Psuedo-Class Selectors A pseudo-element selector is a way to select something that does not exist explicitly as an element in the HTML document tree. You can select the first line or first letter of any HTML element using a pseudo- element selector. A pseudo-class selector targets either a particular state or a variety of family relationships This type of selector is for targeting link states and for adding hover styling for other elements 24 Common Pseudo-Element and Psuedo-Class Selectors a:link Selects links that have not been visited. a:visited Selects links that have been visited. :hover Selects elements that the mouse pointer is currently above. :active Selects an element that is being activated by the user. A typical example is a link that is being clicked. :first-child Selects an element that is the first child of its parent. :first-letter Selects the first letter of an element. :first-line Selects the first line of an element. 25 Example: a link using a pseudo-class selectors Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 26 Example Syntax of a descendant selection Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 27 Contextual Selectors 28 Contextual Selectors A contextual selector (in CSS3 also called combinators) allows you to select elements based on their ancestors, descendants, or siblings. A descendant selector matches all elements that are contained within another element. The character used to indicate descendant selection is a space “ “ div p a{} A child selector matches a specified element that is a direct child of the specified element. The character used is a “>” p > a{} will select p a but not p strong a An Adjacent selector matches a specified element that is the next sibling of the specified element. The character used is a “+” h1 + p will select only h1 p not h1 div p A General selector matches All following elements that shares the same parent as the specified element. The character used is a “~” p ~ span {} selects all span after p regardless of the proximity to p tag. 29 Contextual Selectors Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 30 Cascade 31 Cascade: How Styles Interact “Cascade” in CSS refers to how conflicting rules are handled. CSS uses the following cascade principles to help it deal with conflicts: inheritance, specificity, and location. 32 Cascade: Inheritance Inheritance is the principle that many CSS properties affect their descendants as well as themselves. Font, color, list, and text properties are inheritable; Layout, sizing, border, background, and spacing properties are NOT inheritable. it is also possible to inherit properties that are normally not inheritable using inherit Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 33 Cascade: Specificity Specificity is how the browser determines which style rule takes precedence when more than one style rule could be applied. The more specific selector takes precedence Class selectors take precedence over element selectors, and id selectors take precedence over class selectors id selectors class Selectors element selectors Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 34 Cascade: Specificity Algorithm Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element. Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 35 Cascade: Location Finally, when inheritance and specificity cannot determine style precedence, the principle of location will be used. When rules have the same specificity, then the latest are given more weight. For instance, an inline style will override one defined in an external author style sheet or an embedded style sheet. Image adapted from Fundamentals of Web Development, 3rd Edition, Randy ConnollyPearson Education, Inc. 36 Any questions? 37 COMP 1234 Lecture 6 – CSS Box Model Agenda ◎ Describe the CSS Box Model ◎ Explain how the CSS box model can be used to control spacing between the headings and paragraphs on a page ◎ Describe the effect of collapsed margins ◎ Describe the reset selector -- *{} ◎ Describe these block properties: ○ Height, width, margin, padding, border, background color and background image ◎ Describe these CSS3 features for formatting bozes: ○ rounded corners, shadows, background gradients 2 The CSS Box Model Introduction 3 CSS Box Model – What is it? In web development refers to how HTML elements are modeled in web browser engines, and how the dimensions of those HTML elements are derived from CSS preoperties. In CSS, all HTML elements exist within an element box. In order to become proficient with CSS, you must become familiar with the box model. 4 CSS Box Model – Central Concept!!! All HTML elements can be considered a box Each of those boxes has 5 modifiable dimensions: Dimension Description height and width Describe the dimensions of the actual content of the box (text, images) padding Describes the space between the content and the border of the box border Any kind of line (solid, dotted, dashed etc..) surrounding the box margin The space around the border 5 CSS Box Model – Visualization 6 CSS Box Model – Visualization ◎ The CSS box model lets you work with the boxes that a browser places around each element as well as some inline elements. This model allows you to add formatting such as margins, padding, and borders. 7 The CSS Box Model By default , the box for a block element is as wide as the block that contains it and as tall as it needs to be based on its content. You can use the height and width properties to specify the size of the content area for a block element explicitly You can use other properties to control the margins , border, and padding for a block element. Then, these properties are added to the height and width of the content area to determine the height and width of the box. 8 The formula for calculating the height of a CSS Box top margin top border TOTAL top padding HEIGHT Height bottom padding bottom border bottom margin Height of Box = ( top margin + top border + top padding) + height + ( bottom padding + bottom border + bottom margin ) 9 The formula for calculating the width of a CSS Box left margin right margin left border right border left padding width right padding TOTAL WIDTH Width of Box = ( left margin + left border + left padding) + width + ( right padding + right border + right margin ) 10 Properties for Positioning Elements 11 Properties for positioning elements Property Description position A keyword that determines how an element is positioned. (static, absolute, fixed, relative) top, bottom, left, right For absolute of fixed positioning… specifies the top, bottom, left or right position of box. z-index An integer that determines the stack level of an element whose position property is set to absolute, relative or fixed. 12 Possible values for the position property Property Description static The element is placed in the normal flow. This is the default. absolute The element is removed from the flow, and is positioned based on top, bottom, left or right specified. Element is postioned relative to the closet containing block that is positioned fixed The postion of the element based on top, bottom, left or right specified. The element is positioned relative to the browser window. relative The postion of the element based on top, bottom, left or right specified. The element is positioned relative to its position in the normal flow. 13 CSS: How to size and Space Elements 14 Properties for setting heights and widths (content) Dimension Description width A relative or absolute value that specifies the width of the content area for a block element. You can also specify auto if you want the width of the box calculated for you based on the width of its containing block. This is the default. height A relative or absolute value that specifies the height of the content area for a block element. You can also specify auto if you want the height of the box calculated for you based on the height of its containing block. This is the default. min-width A relative or absolute value that specifies the minimum width of the content area for a block element. The area will always be at least this wide regardless of its content. max-width A relative or absolute value that specifies the maximum width of the content area for a block element. You can also specify none to indicate that there is no maximum width. min-height A relative or absolute value that specifies the minimum height of the content area for a block element. The area will always be at least this tall regardless of its content. max-height A relative or absolute value that specifies the maximum height of the content area for a block element. You can also specify none to indicate that there is no maximum height. 15 How to set the width of the content area width: 450px; width: 75%; width: auto; How to set the height of the content area height: 125px; height: 50%; height: auto; How to set the min and max height and width min-width: 450px; max-width: 600px; min-height: 120px; max-height: 160px; 16 Properties for setting for margins Dimension Description margin-top A relative or absolute value that defines the space between the top border of an element and the top of the containing block or the bottom of the element above it. margin-right A relative or absolute value that defines the space between the right border of an element and the right side of the containing block or the left side of an elment to its right margin-bottom A relative or absolute value that defines the space between the bottom border or an element and the bottom of the containing block or the top of the element below it margin-left A relative or absolute value that defines the space between the left border of an element and the left side of the containing block or the right side of an elment to its left margin One to four relative or absolute values that specify the size of the margins for a box. One value is applied to all four margins. Two values are applied to the top and bottom, right and left Three values are applied to the top, right and left, and bottom margins Four values are applied to the top, right, bottom and left. 17 How to set the margins on a single side margin-top:.5em; margin-right: 1em; margin-bottom: 2em; margin-left: 1em; How to set the min and max height and width margin: 1em; margin: 0 1em; margin:.5em 1em 2em; margin:.5em 1em 2em 1em; 18 Properties for setting padding Dimension Description padding-top A relative or absolute value that defines the space between the top of an element and its top border. padding-right A relative or absolute value that defines the space between the right side of an element and its right border. padding-bottom A relative or absolute value that defines the space between the bottom of an element and its bottom border. padding-left A relative or absolute value that defines the space between the left side of an element and its left border. padding One to four relative or absolute values that specify the padding on multiple sides of an element. One value is applied to all four sides. Two values are applied to the top and bottom, right and left Three values are applied to the top, right and left, and bottom Four values are applied to the top, right, bottom and left. 19 How to set the padding on a single side of an element padding-top: 0; padding-right: 1em; padding-bottom:.5em; padding-left: 1em; How to set the min and max height and width padding: 1em; padding: 0 1em; padding: 0 1em.5em; padding: 0 1em.5em 1em; 20 Properties for setting borders Dimension Description border A border width, border style and border color. The values are applied to all sides of the border. border-side Border width, style, and color values for the specified side of a border border-width One to four relative or absolute values (excluding a percent) or keywords that specify the widths for each side of a border. Possible keywords are , thin, medium, and thick. border-style One to four keywords that specify the styles for each for each side of a border. Possible values are dotted, dashed, solid, double, groove, ridge, inset, outset, and none. The default is none. border-color One to four color values or keywords that specify the color for each side of a border. The default is the color of the element. border-side-width A relative or absolute value (excluding percent) or keyword that specifies the width of the indicated side of a border. border-side-style A keyword that specifies the style for the indicated side of the border 21 The syntax for the shorthand border and border-side properties border: [width] [style] [color]; border-side: [width] [style] [color]; How to set border properties border: thin solid green; border: 2px dashed #808080; border: 1px inset; How to set border border-top: 2px solid black; border-right: 4px double blue; border-width: thin medium thick 10px; 22 How to set the width of border border-width: 1px; border-width: 1px 2px; border-width: 1px 2px 2px; border-width: 1px 2px 2px 3px; How to set style of borders border-style: dashed; border-style: solid none; 23 How to set the color of borders border-color: #808080; border-color: black gray; How to set width, style of and color of borders border-bottom-width: 4px; border-right-style: dashed; border-left-color: gray; 24 Properties for setting background color and images Dimension Description background Background color, image, repeat, attachment and position values backgorund-color A color value or keyword that specifies the color of an elements background. You can also specify the transparent keyword if you want elements behind the element to be visible. Transparent is the default. background-image A relative or absolute URL, that points to the image. You can also specify a keyword of none if you do not want to display the image. None s is the default. background- A keyword that specifies if and how an image is repeated. repeat Possible values are repeat, repeat-x, repeat-y, and no-repeat. The default is repeat, which causes the image to be repeated both vertically and horizontally. background- A keyword that specifies whether an image scrolls with the document or remains in a fixed position. attachment Possible values are scroll and fixed. The default is scroll. background- One or two relative or absolute values or keywords that specify the initial horizontal and vertical positions position of an image. Keywords are left, center, and right; top, center and bottom If a vertical position is not specified, center is the default,. If no position is specified, the default is to place the image at the top-left corner of the element. 25 The syntax for the shorthand background color property background: [color] [image] [repeat] [attachment][position]; How to use the shorthand notation property background: blue; background: blue url("../images/texture.gif"); background: #808080 url("../images/header.jpg") repeat-y scroll center top; How to set the background color and image with separate properties background-color: blue; background-image: url("../images/texture.gif"); 26 Image Repitition, position and scrolling background-repeat: repeat; background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: no-repeat; background-position: left top; background-position: center top; background-position: 90% 90%; background-attachment: scroll; background-attachment: fixed; 27 Background Image Examples 28 Border and Shadow Examples 29 Any questions? 30

COMP 1234 - Introduction to Web Development: Lecture Slides PDF

Document Details

Tags

Related

Summary

Full Transcript