Web Structure and Style. MB2030 Section 2 Class 4

Size: px

Start display at page:

Download "Web Structure and Style. MB2030 Section 2 Class 4"

Brian Austin
5 years ago
Views:

1 Web Structure and Style MB2030 Section 2 Class 4

2 Web Site Hierarchies The Structure of the Web

3 How the Internet Works Computers connected to the Web are called clients and servers. A simplified diagram of how they interact might look like this LAN -Local Area Network - A localized internal collection of devices all connected together inside one home or one building of an organization. Internet - or World Wide Web - The collection and connection of all internal networks together to form one huge world wide network for sharing information across all homes and organizations connected. Switches/Routers/Modems/Wireless Access Points - Devices on a computer network that perform various functions related to physically connecting computers together and routing traffic in between one computer and another. IP Address - Internet Protocol Address - A unique set of numbers assigned to every single device on a network that functions much like a street address on a house. It lets every other device on the network know where to find the device assigned that number. Server - A powerful computer that is used to serve some function on a computer network. Servers perform various functions, such as hosting web pages, hosting network printers, hosting file shares, handing out IP address, and much more. Clients are the typical Web user's Internet-connected devices (for example, your computer connected to your Wi-Fi, or your phone connected to your mobile network) and Web-accessing software available on those devices (usually a web browser like Firefox or Chrome). Servers are computers that store webpages, sites, or apps. When a client device wants to access a webpage, a copy of the webpage is downloaded from the server onto the client machine to be displayed in the user's web browser. DNS - Domain Name Service - A service, typically running from a server that matches and translates names to IP addresses. DHCP - Dynamic Host Configuration Protocol - A service, typically running from a server that assigns each network device its own unique IP address. Web Browser - A piece of software used to access websites. The most common browsers include IE (Internet Explorer), Chrome, Firefox, and Safari. URL - Uniform Resource Locator - Name used to point to a website. This is what you type in to get to a website or what pops up when you search for a website. A URL looks something like "

4 How the Internet Works You (the Client ) request a web page Signal travels through router to DNS (Domain Name System) server DNS server looks up name, translates name into IP address numbers IPv4 Older system approximately 4.3 billion unique addresses IPv6 Newer system - approximately addresses (340 undecillion) A Server responds and retrieves requested info (a page, a graphic, a search result, media file, etc.) and returns result to Client

5 How the Internet Works

6 4,294,967,296 or (2 32 )

16 values > 16x16x16x16 or 16 4 65,536 numbers 65,536 8 = 3.

4 10 38 addresses (340 undecillion) The total number of atoms on the surface of Earth is estimated to be 1.

7 16 values > 16x16x16x16 or ,536 numbers 65,536 8 = x bit/group = 128-bit or approximately addresses (340 undecillion) The total number of atoms on the surface of Earth is estimated to be , which is much less than the total number of IPv6 addresses. So, we can easily assign an IPv6 address to every atom on the surface of the earth. Even then we would be left with enough to addresses to do more than another 100 Earths!

8 How the Internet Works Web domains File space on a server with a name Name is a set IP address, listed with DNS Can be sub-addressed to a particular directory Can have sub-domains E.g. : Actual address: Domain name companies do the setups with the DNS when you buy a domain name Buying a domain name requires you register the name, then point it somewhere Either a host space on a file server Or, a parking space (temp space provided by reg. co.)

9 Web Space Allocated area of a file server Linux, Unix, Windows, etc. Pre-set amount of space Designated by web server application Apache, Internet Info Services (IIS), etc. Access via TCP (Transmission Control Protocol) port Port 80 (also 81, 8080, and others) Can be controlled in various ways Server-side functions CGI, ASP Scripting (and many others) Support databases, languages, templates SQL, PHP Special Functions include web functions Photo gallery, forums, e-commerce, etc.

10 Cascading Style Sheets Put some style into your site

11 Cascading Style Sheets A set of rules that control how elements display Similar to Styles found in applications like InDesign Font parameters color, face, alignment, etc. Division parameters boarders, padding, internal space, etc. Link behaviours Colors, fonts, decorations, background, etc. Can also control certain behaviours CSS are THE principle manner of page control in Web 2.0! CSS is why CMS (Content Management Systems) can have THEMES that can be easily switched very quickly. CSS help designers rapidly develop the User Experience (UX) so that less time can be spent on strict coding. CSS properly done can also help increase SEO (Search Engine Optimization) rankings

12 Basic Style Sheets Cascading Style Sheets (CSS) Three ways of use: In-line : applied to a single item/section Internal : established in Head of document External : references separate style sheet Many properties and very powerful Used for consistent style of site Used for effects and controls Mouse-overs, etc. Used for integrated interactive features Form controls

13 Cascading Style Sheets Found IN HTML code two ways: Embedded (internal) <STYLE> </STYLE> tag in HEAD Referenced by using Class attribute <p class= copy >text</p> <p class= quote >text<p> Styles cascade; all <P> content would follow initial P style (sans-serif) Only those with class designation would use the other appearance attributes <style> p { font-family: sans-serif; p.copy { color: blueviolet; background-color: coral; p.quote { color: darkblue; background-color: #00336F; margin-left: 20px; margin-right: 20px; </style> Formatting [selector] { [property]: [value]; Note: curly braces! Note: colon Note: semi-colon

14 Cascading Style Sheets Found IN HTML code two ways: Embedded (in-line, within tags) style= PROPERTY: VALUE;" attribute within tag Formatted as <p style= PROPERTY: VALUE;">text</p> Example: <p style= color: blueviolet; >text</p> Note: style attribute Note: equals + quote Note: colon Note: end quote Note: semi-colon when a property:value is complete <h1 style= PROPERTY: VALUE;">text</h1> <span style= PROPERTY: VALUE;">text</span> <div style= PROPERTY: VALUE;">text</div> <body style= PROPERTY: VALUE;">text</span>

15 In-Line CSS Affects only the one line item But, can be used with most HTML tags Often used with <SPAN> or <DIV> tags SPAN/DIV are non-functioning (undesignated) container tags They do not do anything until affected by a class/style SPAN is an in-line container (one code item only) that is useful for adding special looks to unique items DIV is a block level container (whole sections) that designates an area of code for various styles, functions and actions.

16 CSS Example <HTML> <HEAD> <TITLE>My First CSS Page</TITLE> </HEAD> <BODY> <span style= font-family: san-serif; font-weight: bold; color: yellow; background-color: red; text-decoration: underline; >Hello world!</span> </BODY> </HTML> Hello World!

17 CSS for Fonts font-family font-size font-weight font-style font-variant line-height letter-spacing word-spacing text-align text-decoration text-indent text-transform vertical-align white-space Colours and Backgrounds color background-color background-image background-repeat background-position background-attachment

18 CSS Externally Linked A CSS file can be created as a text file with a.css extension MyStyle.css Formatted as an EMBEDDED style sheet, only it does NOT use the <STYLE> tags Contains content as styles that one or many web pages can reference When updating the CSS, all pages, when loaded in a browser, check and apply the latest version of the active style sheet The Format for linking a style sheet:

19 mystyle.css html { background: #e6e9e9; background-image: linear-gradient(270deg, rgb(230, 233, 233) 0%, rgb(216, 221, 221) 100%); body { background: #fff; box-shadow: 0 0 2px rgba(0, 0, 0, 0.06); color: #545454; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; margin: 0 auto; max-width: 800px; padding: 2em 2em 4em; h1, h2, h3, h4, h5, h6 { color: #222; font-weight: 600; line-height: 1.3; h2 { margin-top: 1.3em; a { color: #0083e8; b, strong { font-weight: 600; samp { display: none; p.bodytext { color: blue;.mycontent { color: red; background-color: yellow;

20 Additional CSS usage tips Multiple Selectors using the same style can be separated by commas H1, p, span { Color: red; A named style (.something ) can apply to multiple selectors that reference that name when calling a class style.thisgreatstyle { Color: blue; Background-color: red; <p class= thisgreatstyle >text</p> <span class= thisgreatstyle >text</span>

Cascading Style Sheets Level 2

Cascading Style Sheets Level 2 Course Objectives, Session 1 Level 1 Quick Review Chapter 6 Revisit: Web Fonts Chapter 8: Adding Graphics to Web Pages Chapter 9: Sprucing Up Your Site s Navigation Begin