HTML/CSS Made Easy - The Basic Basics PDF

HTML/CSSMADE EASYThe Basic BasicsHTMLCSSThe Internet The World Wide Web Web BrowsersDefinitions2Tanja PetrovaTanja Petrova3HTML: HyperTextMarkup 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 useCSS: Cascading Style SheetsTanja Petrova4CSS describes how a web document should be visually presented, i.e. how it should lookCSS stylesa web documentCSS rules are simple, and easy to understand and useThe Internet and the World Wide WebTanja Petrova5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 HTMLWeb BrowsersTanja Petrova6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, unstyledtext without imagesA browser is also called a clientas it requests and receives service. A computer that serves data to a client is called a serverHow it worksHTML versionsWhat is HTML?7Tanja PetrovaHow HTML works:Tanja Petrova8HTML converts plain text into text that can be displayed on the webHTML gives structureto text so it is easier for humans to read itHow HTML works:Tanja Petrova9HTML is made up of markers called tagsthat surround bits of text, to show the functionand purposeof the textTagsare distinct from the text. They give information about the text.How HTML works:Tanja Petrova10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 standardsHow HTML works:Tanja Petrova11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:Tanja Petrova12HTML 1.0 –1993HTML 2.0 –1995HTML 3.0 –1996HTML 4.0 –1997HTML 4.01 –1999XHTML 1.0 -2000HTML versions:Tanja Petrova13XHTML = eXtensibleHTML –follows the more rigid rules of eXtensibleMarkup Language (XML)XHTML is very similar to HTML 4.01, with just a few more rules. These sessions will be using XHTMLHTML versions:Tanja Petrova14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 documentContent vsPresentation –a critical distinctionHTML vsCSS15Tanja PetrovaHTML vsCSS:Tanja Petrova16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 notintended to handle the displayof contentHTML vsCSS:Tanja Petrova17CSS describes how HTML documents should be displayedCSS adds visual design and does not interfere with the meaning of the contentHTML vsCSS:Tanja Petrova18Separating 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 markupi.e. mixing content with presentationText EditorsWeb BrowsersFile StorageTo make a web page19Tanja PetrovaText Editors:Tanja Petrova20Windows –Notepad++ , PSPad, KomodoLinux –Vim, gEdit, EmacsMac –TextEdit, Smultron, TextWranglerWeb Browsers:Tanja Petrova21ChromeFirefoxExplorerSafariOperaNetscapeFile Storage:Tanja Petrova22To 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.URL ComponentsAbsolute vsRelative URLsThe URL23Tanja PetrovaURL: Uniform Resource LocatorTanja Petrova24Every 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 LocatorTanja Petrova25Each of these addresses points to a specific file:www.wiziq.comwww.wiziq.com/classeswww.wiziq.com/classes/myclassesEach of these is a unique address.URL ComponentsTanja Petrova26Each URL is made up of distinct parts that communicate specific information:Protocol Hostname Path Filehttp://www.wiziq.com/content/upload.htmlPrefix Domain Name ExtensionURLComponentsTanja Petrova27Protocol –indicates a set of rules that dictate the movement of data over the internet. The web uses HyperTextTransfer Protocol (HTTP) to transmit hypertext data from one computer to another. The protocol is separated by a colon and two forward slashesURLComponentsTanja Petrova28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 developedURL ComponentsTanja Petrova29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, .bizURL ComponentsTanja Petrova30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 slashURL ComponentsTanja Petrova31File name and extension –identify the requested file. The file extension indicates the type of file e.g. .html, .css, .jsAbsolute URLTanja Petrova32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.htmlRelative URLTanja Petrova33A relative URL references only the path and/or file, leaving out the protocol and hostname:classes/myclasses.htmlHope you enjoyed this presentation. Please come back again!34Tanja Petrova