DOCSLIB.ORG

HTML and CSS Tutorial Chapter 1: Getting Started

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
HTML and CSS Tutorial Chapter 1: Getting Started HTML and CSS Tutorial This work is licensed under a Creative Commons License: Attribution 3.0 Unported. You are free: • to Share — to copy, distribute, and transmit the work • to Remix — to adapt the work Under the following conditions: • Attribution. You must attribute the work in the manner specified by the author or licensor. For attribution purposes, the URL to be associated with the work is http://www.goer.org/HTML, and the Title and Author of this work are as follows: “The Pocket HTML Tutorial” Copyright 2012 by Evan Goer. For any reuse or distribution, you must make clear to others the license terms of this work. Any of these conditions can be waived if you get permission from the copyright holder. Your fair use and other rights are in no way affected by the above. This is a human-readable summary of the Legal Code (the full license). Chapter 1: Getting Started Welcome to the world of HTML! If you have never written HTML code before, you should start with this section. If you’ve written HTML before, you should feel free to skip ahead to Chapter 2, Markup Basics. When you’re done with this chapter, you should be able to: • create and alter a simple web page • explain what HTML elements and attributes are • use your browser to help you view and reuse code from other websites Section Summaries The Getting Started chapter contains these sections: 1. Diving In — Demonstrates basic HTML concepts by diving in and creating a simple web page. 2. Structure — Examines document structure: the html element, the head, the title, and the body. 3. Tinkering — Makes alterations to the “Simple Web Page”. We’ll add text, change the background color, and explore how HTML handles whitespace. 4. Elements — Explores elements, which are the basic building blocks of a web page. What are the components of a element? What happens if you misspell a element? And is there a good use for the blink element? The answer might surprise you! 5. Attributes — Explores attributes, which modify the behavior of a element. We’ll look at the components of an attribute and talk about attribute whitespace, attribute misspellings, and other issues. 6. Browser Tools — Explains how to use key browser features, such as viewing source, viewing page properties, and saving images. Diving In The first thing we’re going to do is dive in and create a simple webpage. We’ll explore what’s going on soon, but for now, just follow the directions as best you can. To create your web page, you need: • A browser (you’re using one right now) • A plain text editor (you already have one on your machine) Step 1: Open a Text Editor A text editor is a program that edits plain text files. When authoring HTML, do not use Word, Wordpad, Pages, or any other program that does not save files as plain text. • Windows users: open Notepad ( Start | Programs | Accessories | Notepad ) • Mac OS X users: open vi or TextEdit ( Applications | TextEdit ) • Linux and other UNIX users: open vi or emacs Unfortunately, Notepad and TextEdit are not very good text editors. By default, Notepad always tries to save and open files with a .txt extension. You must constantly fight with it to make it save and open webpages (files with a .htm or .html extension). Be strong, and ye shall overcome. Likewise, TextEdit does not use plain text by default. Before using TextEdit to edit HTML, go into Preferences and set the Format for new documents to be Plain Text. For good measure, you might have to convert your existing document to plain text ( Format | Make Plain Text ). Using Notepad to write HTML is kind of like using a butter knife to cut a birthday cake — it’s the wrong tool for the job. A better choice would be a more advanced text editor, such as: • Crimson Editor (Windows, free) • Smultron (Mac OS X, free) • TextMate (Mac OS X, not free, but well worth the money) • jEdit (Cross-platform, free) All of these editors avoid the problems with file extensions and plain text described above, and have numerous extra features for advanced users. You don’t have to download one of these editors right now, but if you continue with web development, you’ll need to upgrade your tools. Step 2: Create and Save the Web Page Copy-and-paste the text in Example 1.1, “A Simple Webpage” into your text editor, starting with the text, "<html>". Example 1.1. A Simple Webpage view html view plain print ? 1. <html> 2. <head> 3. <title>A Simple Webpage</title> 4. </head> 5. <body> 6. This is a simple webpage. 7. </body> 8. </html> To see what this HTML code sample looks like as a web page, click the view html link above the code sample. The words that are surrounded with angle brackets (< >) are called elements. We will talk about what a element is soon, but first let’s finish creating and displaying your webpage. Once you have copied the text over to your text editor, save the file in your home directory or Desktop as the file simple.html. Note Notepad will try to append a .txt extension to your file name. Don’t let this happen. In the Save As dialog box, set File name to simple.html and change Save as type from Text Documents to All Files (*.*). Step 3: Display the Webpage in Your Browser Open the file simple.html by typing Ctrl-O (Cmd-O for Mac users) and selecting the file. Internet Explorer users should select Browse to find the file. After selecting simple.html, click Open. Your webpage should appear in the browser window. Compare it to Example 1.1. Does it match? (To compare results, click the view html link above Example 1.1.) If it does, congratulations! Let’s move on to the next section, where we’ll try to answer the question, what the heck is going on? Structure The previous section demonstrates how to create a simple web page. If you haven’t saved this example on your computer as the file simple.html, do so now. Example 1.2. A Simple Webpage view html view plain print ? 1. <html> 2. <head> 3. <title>A Simple Webpage</title> 4. </head> 5. <body> 6. This is a simple webpage. 7. </body> 8. </html> If you view simple.html in your browser, you will see the words “This is a simple webpage” on a white or grey background. Where did everything else go? And what are those words with the angle brackets, anyway? A Brief Introduction to Elements The web page simple.html uses these elements: html, head, title, and body. • Elements are delineated by angle brackets (< >). • Elements are “invisible”; they don’t directly appear in the web page. Instead, they serve as instructions to your browser. They can change your text’s appearance, create a link, insert an image, and much more. • An element starts with an opening tag (<element>) and ends with a closing tag (</element>). Some elements do not require closing tags. We’ll discuss the general properties of elements in some detail in Elements. For now, let’s focus on the particular elements in the “Simple Webpage” example. Structure of the Simple Webpage Although the “Simple Webpage” doesn’t look like much, its elements (html, head, title, and body) are fundamental to the structure of all HTML documents. Here’s what these elements mean: • <html>: “Here begins an HTML document.” The html element helps identify a file as an HTML document. • <head>: “Here begins the header.” The header contains elements that apply to the overall document. For example, it might contain elements that are designed for search engines to process or elements that change the overall appearance of the webpage. However, elements in the header do not display directly as normal webpage content. The reasons you would be concerned about the header are a bit abstract at this stage, so we won’t worry about it much until later. • <title>: “Here begins the document title.” (Must be in the header) If you view the file simple.html in your browser, along the top of your browser window you should see the words, “A Simple Webpage”. These words appear because of the title element. As an exercise, change the title of the simple.html webpage to, “My First Webpage”. Save your changes and view them by clicking the browser’s Refresh or Reload button. Titles might not seem important at first glance, but they’re actually quite useful. For example, if a search engine displays your page in a list of search results, it will probably display the title as your page’s title. If you omit the title element, the search engine will make up one for you. This is Not a Good Thing. Note You might have noticed that the title element is contained within the head element. Is this kosher? Absolutely! In fact, many elements are designed to contain other elements, and you will be nesting elements within other elements quite frequently as you continue. • <body>: “Here begins the body.” The body is where you put text and elements to be displayed in the main browser window. The reason that the words “This is a simple webpage” appear when you display simple.html is becaused you placed them in the body. So why do we only see “This is a simple webpage” when we display simple.html in a browser? The answer is, after you remove all the elements that are not designed to display in the browser window, the sentence “This is a simple webpage” is the only thing left.
Load more

Recommended publications
  • Typographic Specimen Poster
    Typographic Specimen Poster Type specimen posters were historically released by foundries and printers as a means of introducing new typefaces to designers. The design aesthetic of the posters was mostly utilitarian (simple and functional) with the goal of displaying a typeface in different sizes for the designer to visualize how the typeface could be used. As technology progressed from the linotype to the digital press, the emphasis on posters as the primary means of showing off a new typeface diminished, however the type specimen poster grew into their own form of expressive design. While modern type specimen posters are not as common, they are often far more expressive than their historical counterparts. Akzidenz Grotesk, design by Gunter Gerhard Lange in 1898 Homework: Put a Typeface to a Name This is a project that focuses on research and utilizing your knowledge of typography and layout skills learned over the past semester. Using InDesign, the objective of your type poster is to highlight the different qualities or characteristics of your chosen typeface, introduce the typographer, as well as generate a design that compliments the aesthetics of the prominent design movement of the time. Part 1) Research and Sketchbook Exercise: Research online and find at least 5 examples of type specimen sheets that inspire you, even if their design is different from the approach you will be taking. From your assigned century, choose a typographer and typeface they designed. Research the prominent design movement associated with your typographerʼs region and time period (Example: Typographer: Eric Gill, Typeface: Gill Sans, Time Period: 1920s England, Prominent Design Movement: Art Deco).
    [Show full text]
  • Avid Marquee Title Tool User's Guide
    Avid® Marquee® Title Tool User’s Guide ™ make manage move | media Avid ® Copyright and Disclaimer Product specifications are subject to change without notice and do not represent a commitment on the part of Avid Technology, Inc. The software described in this document is furnished under a license agreement. You can obtain a copy of that license by visiting Avid's Web site at www.avid.com. The terms of that license are also available in the product in the same directory as the software. The software may not be reverse assembled and may be used or copied only in accordance with the terms of the license agreement. It is against the law to copy the software on any medium except as specifically allowed in the license agreement. Avid products or portions thereof are protected by one or more of the following United States Patents: 4,746,994; 4,970,663; 5,045,940; 5,267,351; 5,309,528; 5,355,450; 5,396,594; 5,440,348; 5,452,378; 5,467,288; 5,513,375; 5,528,310; 5,557,423; 5,577,190; 5,583,496; 5,584,006; 5,627,765; 5,634,020; 5,640,601; 5,644,364; 5,654,737; 5,719,570; 5,724,605; 5,726,717; 5,729,673; 5,745,637; 5,752,029; 5,754,180; 5,754,851; 5,799,150; 5,812,216; 5,828,678; 5,842,014; 5,852,435; 5,995,115; 6,016,152; 6,061,758; 6,130,676; 6,532,043; 6,546,190; 6,636,869; 6,747,705; 6,813,622; D352,278; D392,267; D392,268; D392,269; D395,291; D396,853; D398,912.
    [Show full text]
  • WWII Book Project Project Based Learning
    World History Semester 11 Causes of WWII Book Project Project Based Learning Overview: The students will create a children’s book or a comic book / graphic novel over one, many, or all of the causes of WWII. The students will use the internet to look up pictures to include in their book as well as conduct research over the causes of WWII. At the culmination of the project, each student will read his or her book to the class. The last page of the book needs to be 1 page explanation of the student’s opinion of what the main cause of WWII was and why they feel that way. 21 Century outcomes: Core Subject: History Learning and Innovation Skills Think Creatively Use Systems of Thinking Communicate Clearly Information, Media and Technology Skills Access and Evaluate Information Use and Manage Information Apply Technology Effectively Life and Career Skills Manage Goals and Time Work Independently Manage Projects Produce Results Social Studies, FHSD curriculum World History Content SS2. Knowledge of principles and processes of governance systems Content SS3b. Knowledge of continuity and change in the history of the world Causes of WWII Project: Causes of WWII Children’s book / comic book / graphic novel Requirements: 1. Front Cover/Introduction 2. at least 5 pages of content (not including the front / back cover, the timeline, or the 1 page answer) 3. Each page of the story must include words AND pictures 4. Timeline of the most important events leading up to WWII 5. The student’s opinion as to what the main cause of WWII was and why.
    [Show full text]
  • Richard L. Baskerville
    Richard L. Baskerville Department of Computer Information Systems Robinson College of Business, Georgia State University PO Box 4015, Atlanta, Georgia 30032-4015, USA Tel +1 404 413 7362 Fax +1 404 413 7394 Internet: [email protected] Degrees Doctor in Natural Sciences (2014) -- honoris causa. Roskilde University Doctor of Philosophy (2014) -- honoris causa. University of Pretoria. Faculty of Engineering, Built Environment, and Information Technology. Doctor of Philosophy (1986) -- Systems Analysis. The London School of Economics and Political Science (University of London), supervised by Frank Land, Department of Information Systems. Master of Science (1980) -- Analysis, Design and Management of Information Systems (Accounting Option). The London School of Economics. Bachelor of Science summa cum laude (1979) -- Business and Management. University of Maryland, European Division, Heidelberg. Primary areas: Personnel Management and Business Law. Academic Appointments 1997 - present time. Georgia State University, J. Mack Robinson College of Business Administration, Department of Computer Information Systems, Regents’ Professor (2016 - present), Board of Advisors Professor of Information Systems (2007 - present), Professor of Information Systems (2001 - 2007), Chair of the Department (1999 - 2006), Associate Professor of Information Systems (1997 - 2001). 2014 - present time. School of Information Systems, Curtin Business School, Curtin University, Perth, Western Australia, Professor (partial appointment). 1988 - 1997. State University of New York at Binghamton, School of Management, Associate Professor of Information Systems with tenure (1994 - 1997, Assistant Professor, 1988-1994). 1984 - 1988. University of Tennessee at Chattanooga, School of Engineering, Associate Professor of Computer Science, (1987-1988), Assistant Professor (1984 to 1987). 1981 - 1984. Francis Marion University (then F. M. College), Department of Business, Assistant Professor of Computer Science.
    [Show full text]
  • Using Uportal
    Chapter 2 Using uPortal Introduction to uPortal Publishing New Channels XHTML Design of uPortal The Layout Making a New Skin Cascading Style Sheets uPortal Graphics Layout Fragments Appendix A: The Default uPortal Cascading Style Sheet GUI Format Text Format Note on the images in this document: Usually, the picutres that help someone understand how a program works will match exactly what that person will see on the screen of their computer. As they go from one screen to the next, the pictures in the book will move along with them so that they know that they are in the rigth place. A portal is very customizable in the way it looks and what options are made available for people using it. By this, each school or business can change the look and feel of their portal so that it matches their symbols and colors, as well as deciding to remove certain options and buttons. The pictures that are used in this manual were captured as uPortal was being created. It is almost certain that the look of the portal that you will be using will not match that of the one used during development. It may look different, but it will still work in the way described here. Introduction to uPortal uPortal is a framework for presenting aggregated content that is customizable by both the user and the administrators. It is built using a database to contain the information about each user, with XSL transformations and JAVA to take this abstract data and convert it into the final, structured layout.
    [Show full text]
  • HTML5 Favorite Twitter Searches App Browser-Based Mobile Apps with HTML5, CSS3, Javascript and Web Storage
    Androidfp_19.fm Page 1 Friday, May 18, 2012 10:32 AM 19 HTML5 Favorite Twitter Searches App Browser-Based Mobile Apps with HTML5, CSS3, JavaScript and Web Storage Objectives In this chapter you’ll: ■ Implement a web-based version of the Favorite Twitter Searches app from Chapter 5. ■ Use HTML5 and CSS3 to implement the interface of a web app. ■ Use JavaScript to implement the logic of a web app. ■ Use HTML5’s Web Storage APIs to store key-value pairs of data that persist between executions of a web app. ■ Use a CSS reset to remove all browser specific HTML- element formatting before styling an HTML document’s elements. ■ Save a shortcut for a web app to your device’s home screen so you can easily launch a web app. = DRAFT: © Copyright 1992–2012 by Deitel & Associates, Inc. All Rights Reserved. Androidfp_19.fm Page 2 Friday, May 18, 2012 10:32 AM 2 Chapter 19 HTML5 Favorite Twitter Searches App 19.1 Introduction 19.5 Building the App 19.2 Test-Driving the Favorite Twitter 19.5.1 HTML5 Document Searches App 19.5.2 CSS 19.5.3 JavaScript 19.3 Technologies Overview Outline 19.6 Wrap-Up 19.1 Introduction The Favorite Twitter Searches app from Chapter 5 allowed users to save their favorite Twit- ter search strings with easy-to-remember, user-chosen, short tag names. Users could then conveniently follow tweets on their favorite topics. In this chapter, we reimplement the Fa- vorite Twitter Searches app as a web app, using HTML5, CSS3 and JavaScript.
    [Show full text]
  • Sample XHTML Code
    Sample XHTML Code Docs version: 2.0 Version date 7/29/2009 Contents • Introduction • Home page • General page structure • Tabbed content • Navigation lists • iPhone action links Introduction These code samples illustrate how we designed and developed the user for the MIT Mobile Web. These code samples are taken from the original XHTML design mockups which were the basis of the final implementation of the live MIT Mobile Web. We’re presenting these design mockups here because showing the final functional code with its back-end integration would make it harder to read the actual markup as the web browser sees it – which is what determines what the end user actually sees and interacts with. The XHTML and CSS generated by the functional code is in any case very close to these original design mockups. We’re not presenting every page for every module here. Rather, we’re showing representative pages that illustrate user-interface patterns that appear throughout the MIT Mobile Web. After studying these code snippets and the patterns they represent, you should be able to easily understand how specific pages in the MIT Mobile Web were built, as well as how to go about building new page layouts sharing a consistent basic structure, function and building blocks. For background on why we optimized the UI for three different categories of devices, please read the Introduction to the Mobile Web document. Commented source code, images and other assets for the entire MIT Mobile Web – including functional code for back-end integration – is online as a SourceForge project at http://sourceforge.net/projects/mitmobileweb/.
    [Show full text]
  • Font HOWTO Font HOWTO
    Font HOWTO Font HOWTO Table of Contents Font HOWTO......................................................................................................................................................1 Donovan Rebbechi, elflord@panix.com..................................................................................................1 1.Introduction...........................................................................................................................................1 2.Fonts 101 −− A Quick Introduction to Fonts........................................................................................1 3.Fonts 102 −− Typography.....................................................................................................................1 4.Making Fonts Available To X..............................................................................................................1 5.Making Fonts Available To Ghostscript...............................................................................................1 6.True Type to Type1 Conversion...........................................................................................................2 7.WYSIWYG Publishing and Fonts........................................................................................................2 8.TeX / LaTeX.........................................................................................................................................2 9.Getting Fonts For Linux.......................................................................................................................2
    [Show full text]
  • Suitcase Fusion 8 Getting Started
    Copyright © 2014–2018 Celartem, Inc., doing business as Extensis. This document and the software described in it are copyrighted with all rights reserved. This document or the software described may not be copied, in whole or part, without the written consent of Extensis, except in the normal use of the software, or to make a backup copy of the software. This exception does not allow copies to be made for others. Licensed under U.S. patents issued and pending. Celartem, Extensis, LizardTech, MrSID, NetPublish, Portfolio, Portfolio Flow, Portfolio NetPublish, Portfolio Server, Suitcase Fusion, Type Server, TurboSync, TeamSync, and Universal Type Server are registered trademarks of Celartem, Inc. The Celartem logo, Extensis logos, LizardTech logos, Extensis Portfolio, Font Sense, Font Vault, FontLink, QuickComp, QuickFind, QuickMatch, QuickType, Suitcase, Suitcase Attaché, Universal Type, Universal Type Client, and Universal Type Core are trademarks of Celartem, Inc. Adobe, Acrobat, After Effects, Creative Cloud, Creative Suite, Illustrator, InCopy, InDesign, Photoshop, PostScript, Typekit and XMP are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. Apache Tika, Apache Tomcat and Tomcat are trademarks of the Apache Software Foundation. Apple, Bonjour, the Bonjour logo, Finder, iBooks, iPhone, Mac, the Mac logo, Mac OS, OS X, Safari, and TrueType are trademarks of Apple Inc., registered in the U.S. and other countries. macOS is a trademark of Apple Inc. App Store is a service mark of Apple Inc. IOS is a trademark or registered trademark of Cisco in the U.S. and other countries and is used under license. Elasticsearch is a trademark of Elasticsearch BV, registered in the U.S.
    [Show full text]
  • Chapter 13, Using Fonts with X
    13 Using Fonts With X Most X clients let you specify the font used to display text in the window, in menus and labels, or in other text fields. For example, you can choose the font used for the text in fvwm menus or in xterm windows. This chapter gives you the information you need to be able to do that. It describes what you need to know to select display fonts for use with X client applications. Some of the topics the chapter covers are: The basic characteristics of a font. The font-naming conventions and the logical font description. The use of wildcards and aliases for simplifying font specification The font search path. The use of a font server for accessing fonts resident on other systems on the network. The utilities available for managing fonts. The use of international fonts and character sets. The use of TrueType fonts. Font technology suffers from a tension between what printers want and what display monitors want. For example, printers have enough intelligence built in these days to know how best to handle outline fonts. Sending a printer a bitmap font bypasses this intelligence and generally produces a lower quality printed page. With a monitor, on the other hand, anything more than bitmapped information is wasted. Also, printers produce more attractive print with variable-width fonts. While this is true for monitors as well, the utility of monospaced fonts usually overrides the aesthetic of variable width for most contexts in which we’re looking at text on a monitor. This chapter is primarily concerned with the use of fonts on the screen.
    [Show full text]
  • Chapter 10 Document Object Model and Dynamic HTML
    Chapter 10 Document Object Model and Dynamic HTML The term Dynamic HTML, often abbreviated as DHTML, refers to the technique of making Web pages dynamic by client-side scripting to manipulate the document content and presen- tation. Web pages can be made more lively, dynamic, or interactive by DHTML techniques. With DHTML you can prescribe actions triggered by browser events to make the page more lively and responsive. Such actions may alter the content and appearance of any parts of the page. The changes are fast and e±cient because they are made by the browser without having to network with any servers. Typically the client-side scripting is written in Javascript which is being standardized. Chapter 9 already introduced Javascript and basic techniques for making Web pages dynamic. Contrary to what the name may suggest, DHTML is not a markup language or a software tool. It is a technique to make dynamic Web pages via client-side programming. In the past, DHTML relies on browser/vendor speci¯c features to work. Making such pages work for all browsers requires much e®ort, testing, and unnecessarily long programs. Standardization e®orts at W3C and elsewhere are making it possible to write standard- based DHTML that work for all compliant browsers. Standard-based DHTML involves three aspects: 447 448 CHAPTER 10. DOCUMENT OBJECT MODEL AND DYNAMIC HTML Figure 10.1: DOM Compliant Browser Browser Javascript DOM API XHTML Document 1. Javascript|for cross-browser scripting (Chapter 9) 2. Cascading Style Sheets (CSS)|for style and presentation control (Chapter 6) 3. Document Object Model (DOM)|for a uniform programming interface to access and manipulate the Web page as a document When these three aspects are combined, you get the ability to program changes in Web pages in reaction to user or browser generated events, and therefore to make HTML pages more dynamic.
    [Show full text]
  • Bret Easton Ellis
    001 Front 1 May2019_Layout 1 30/05/2019 16:16 Page 1 N o. 7 6 THE MAGAZINE J U N 1 9 TRAVEL LIVING FOOD & BOOZE One man’s quest to cure a fear of Why your next home improvement Line of Duty star flying, from Xanax to hypnotherapy project should be a lawn on your roof Martin Compston takes a trip down memory lane as he TYCOONS AND THEIR TOYS imagines his What it’s like to party hard on a £33m sports yacht with its own jet pack perfect last meal BRET EASTON ELLIS: OOPS I SAID IT AGAIN The author who can’t stop offending millennials talks Trump, ‘corporate wokeness’ and tweeting drunk 002-003 DPS 23 May 2019_Layout 1 30/05/2019 13:30 Page 1 PanoMaticLunar LONDON Wempe, New Bond Street Watches of Switzerland, Oxford Street Watches of Switzerland, Knightsbridge Watches of Switzerland, Regent Street Harrods, Heathrow Airport, Terminal 2 MANCHESTER Ernest Jones, St Ann Street YORK Berry’s, Stonegate EDINBURGH Chisholm Hunter, Princes Street GLASGOW Chisholm Hunter, Argyll Arcade 002-003 DPS 23 May 2019_Layout 1 30/05/2019 13:31 Page 2 W 004-005 DPS 23 May 2019_Layout 1 30/05/2019 17:46 Page 1 This award- winner has the critics gripped. Model shown is a Fiesta ST-3 3-Door 1.5 200PS Manual Petrol with optional Full LED Headlamps. Fuel economy mpg (l/100km): Combined 40.4 (7.0). *CO2 emissions 136g/km. Figures shown are for comparability purposes; they only compare fuel consumption and CO2 figures with other cars tested to the same technical procedures.
    [Show full text]