HTML/CSSMade Easy : HTML/CSSMade Easy The Basic Basics
Definitions : HTML
CSS
The Internet
The World Wide Web
Web Browsers Definitions 2 Tanja Petrova
Slide 3 : Tanja Petrova 3 HTML: HyperText Markup Language
HTML describes the function and purpose of a web document, i.e. what it means
HTML is used to build web pages from scratch
HTML rules are simple, and easy to understand and use
CSS: Cascading Style Sheets : CSS: Cascading Style Sheets Tanja Petrova 4 CSS describes how a web document should be visually presented, i.e. how it should look
CSS styles a web document
CSS rules are simple, and easy to understand and use
The Internet and the World Wide Web : The Internet and the World Wide Web Tanja Petrova 5 The Internet is a network of computers across the world that are connected, and send and receive data
The World Wide Web is the millions/billions of files/documents that live on computers and form a web of information around the world
The web has evolved from plain text to include videos, images and audio, but the text is encoded in HTML
Web Browsers : Web Browsers Tanja Petrova 6 A browser’s job is to interpret, and then render/present a web document
Not all browsers are graphical, i.e. some only render plain, unstyled text without images
A browser is also called a client as it requests and receives service. A computer that serves data to a client is called a server
What is HTML? : How it works
HTML versions What is HTML? 7 Tanja Petrova
How HTML works: : How HTML works: Tanja Petrova 8 HTML converts plain text into text that can be displayed on the web
HTML gives structure to text so it is easier for humans to read it
How HTML works: : How HTML works: Tanja Petrova 9 HTML is made up of markers called tags that surround bits of text, to show the function and purpose of the text
Tags are distinct from the text. They give information about the text.
How HTML works: : How HTML works: Tanja Petrova 10 There are rules to follow when writing HTML to ensure that it works properly
These rules are maintained by the World Wide Web Consortium, an organization that also maintains web standards
How HTML works: : How HTML works: Tanja Petrova 11 Standardization ensures that everyone follows the same rules
Standardization also ensures that websites work everywhere. Standards make the web ‘platform independent’ and ‘device independent’
HTML versions: : HTML versions: Tanja Petrova 12 HTML 1.0 – 1993
HTML 2.0 – 1995
HTML 3.0 – 1996
HTML 4.0 – 1997
HTML 4.01 – 1999
XHTML 1.0 - 2000
HTML versions: : HTML versions: Tanja Petrova 13 XHTML = eXtensible HTML – follows the more rigid rules of eXtensible Markup Language (XML)
XHTML is very similar to HTML 4.01, with just a few more rules. These sessions will be using XHTML
HTML versions: : HTML versions: Tanja Petrova 14 XHTML Strict – the most rigid rules that must be followed. Deprecated features are forbidden
XHTML Transitional – some outdated features are allowed
XHTML Frameset – used only for frames i.e. web pages that are split into parts, each with a different document
HTML vs CSS : Content vs Presentation – a critical distinction HTML vs CSS 15 Tanja Petrova
HTML vs CSS: : HTML vs CSS: Tanja Petrova 16 HTML gives structure to text by treating different blocks of words as different types of content
HTML is intended to provide structure – it is only concerned with what content means. HTML is not intended to handle the display of content
HTML vs CSS: : HTML vs CSS: Tanja Petrova 17 CSS describes how HTML documents should be displayed
CSS adds visual design and does not interfere with the meaning of the content
HTML vs CSS: : HTML vs CSS: Tanja Petrova 18 Separating content from presentation is critical. It ensures that the content of a web page can be modified without having to change the design. On the other hand, the design of a web page can be modified without having to change the content. This avoids the trap of presentational markup i.e. mixing content with presentation
To make a web page : Text Editors
Web Browsers
File Storage To make a web page 19 Tanja Petrova
Text Editors: : Text Editors: Tanja Petrova 20 Windows – Notepad++ , PSPad, Komodo
Linux – Vim, gEdit, Emacs
Mac – TextEdit, Smultron, TextWrangler
Web Browsers: : Web Browsers: Tanja Petrova 21 Chrome
Firefox
Explorer
Safari
Opera
Netscape
File Storage: : File Storage: Tanja Petrova 22 To be visible on the web, your files must live on a web server. Your ISP may provide you with web space, you may use free web space online, or you may pay for web space.
The URL : URL Components
Absolute vs Relative URLs The URL 23 Tanja Petrova
URL: Uniform Resource Locator : URL: Uniform Resource Locator Tanja Petrova 24 Every document on the web lives at a unique address called a URL. This address allows a web-connected device to locate a specific file on a specific server to download and display it to the user or to use it for another purpose.
URL: Uniform Resource Locator : URL: Uniform Resource Locator Tanja Petrova 25 Each of these addresses points to a specific file:
www.wiziq.com
www.wiziq.com/classes
www.wiziq.com/classes/myclasses
Each of these is a unique address.
URL Components : URL Components Tanja Petrova 26 Each URL is made up of distinct parts that communicate specific information:
Protocol Hostname Path File
http://www.wiziq.com/content/upload.html
Prefix Domain Name Extension
URLComponents : URLComponents Tanja Petrova 27 Protocol – indicates a set of rules that dictate the movement of data over the internet. The web uses HyperText Transfer Protocol (HTTP) to transmit hypertext data from one computer to another. The protocol is separated by a colon and two forward slashes
URLComponents : URLComponents Tanja Petrova 28 Hostname – the site from which the browser will get the file. The real address is a numeric Internet Protocol address (65.139.384.205), but it would be very challenging for humans to have to remember a series of numbers for every website, so a more user-friendly system was developed
URL Components : URL Components Tanja Petrova 29 Domain name – a more memorable alias that directs traffic to an IP address
Domain prefix – names the particular server being accessed . The prefix is optional
Domain suffix – indicates the category of domain - .edu, .co.uk, .biz
URL Components : URL Components Tanja Petrova 30 Path – specifies the directory/folder that holds the document we want. This path is the route a client follows to reach the file. Each directory is separated by a forward slash
URL Components : URL Components Tanja Petrova 31 File name and extension – identify the requested file. The file extension indicates the type of file e.g. .html, .css, .js
Absolute URL : Absolute URL Tanja Petrova 32 An absolute URL includes the full string, including the protocol and hostname. It leaves no doubt as to the location of the resource:
http://www.wiziq.com/classes/myclasses.html
Relative URL : Relative URL Tanja Petrova 33 A relative URL references only the path and/or file, leaving out the protocol and hostname:
classes/ myclasses.html
Slide 34 : Hope you enjoyed this presentation. Please come back again! 34 Tanja Petrova