Prepare-se para as provas
Estude fácil! Tem muito documento disponível na Docsity
Ganhe pontos para baixar
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Guias e Dicas
Prepare-se para as provas
Estude fácil! Tem muito documento disponível na Docsity
Encontrar documentos
Prepare-se para as provas com trabalhos de outros alunos como você, aqui na Docsity
Encontra documentos específicos para os exames da tua universidade
Encontra documentos específicos para os exames da tua universidade
Videoaulas
Prepare-se com as videoaulas e exercícios resolvidos criados a partir da grade da sua Universidade
Quiz
Responda perguntas de provas passadas e avalie sua preparação.
Ganhe pontos para baixar
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Livro HTML5 e CSS3
Tipologia: Notas de estudo
2014
1 / 510
Esta página não é visível na pré-visualização
Não perca as partes importantes!
Documentos relacionados
Pré-visualização parcial do texto
Baixe HTML5 and CSS3 Web Design e outras Notas de estudo em PDF para Informática, somente na Docsity!
For your convenience Apress has placed some of the front
matter material after the index. Please use the Bookmarks
and Contents at a Glance links to access them.
xvii
Introduction
The Web is an ever-changing, evolving entity, and it’s easy to get left behind. As designers and writers, we see a lot of books on web design, and although many are well written, few are truly integrated, modular resources that anyone can find useful in their day-to-day work. Most web design books concentrate on a single technology (or, commonly, a piece of software), leaving you to figure out how to put the pieces together.
This book is different
The Essential Guide to HTML5 and CSS3 Web Design provides a modern, integrated approach to web design. Each of the chapters looks at a specific aspect of creating a web page, such as formatting type, working with images, creating navigation, and creating layout blocks. In each case, relevant technologies are explored in context and at the appropriate times, just like in real-world projects; for example, markup is explored along with associated CSS and JavaScript, rather than each technology being placed in separate chapters, and visual design ideas are discussed so you can get a feel for how code affects page layouts. Dozens of practical examples are provided, which you can use to further your understanding of each subject. This highly modular and integrated approach means you can dip in and out of the book as you need, crafting along the way a number of web page elements that you can use on countless sites in the future. Because the entire skills gamut is covered—from foundation to advanced—this book is ideal for beginners and longtime professionals alike. If you’re making your first move into standards-based web design, the “ground floor” is covered, rather than an assumption being made regarding your knowledge. However, contemporary ideas, techniques, and thinking are explored throughout, ensuring that the book is just as essential for the experienced designer wanting to work on CSS layouts or for the graphic designer who wants to discover how to create cutting-edge websites. This book’s advocacy of web standards, usability, and accessibility with a strong eye toward visual design makes it of use to technologists and designers alike, enabling everyone to build better websites. For those moments when a particular tag or property value slips your mind, this book provides a comprehensive reference guide that includes important and relevant HTML5 elements and attributes, HTML5 entities, web colors, and CSS 3 properties and values.
Code Examples
Remember that you can also download files associated with this book from www.apress.com—just find the book and follow its instructions to access downloads and other associated resources. To make it easier to work through the exercises, each one has an introductory box that lists where you can find any required files and the completed files within the downloadable file archive. A short overview of what you’ll learn is also included.
Chapter 1
An Introduction to Web Design
In this chapter:
Introducing the Internet and web design Working with web standards Working with HTML Understanding and creating CSS rules Creating web page boilerplates
An Introduction to Web Design
So, from obscure roots as a concept for military communications, the Internet has evolved into an essential tool for millions of people, enabling them to communicate with each other, research and gather information, telecommute, shop, play games, and become involved in countless other activities on a worldwide basis.
Why create a website?
Before putting pen to paper (and mouse to keyboard), it’s important to think about the reason behind putting a site online. Millions already exist, so why do you need to create one yourself? Also, if you’re working for a company, perhaps you already have plenty of marketing material, so why do you need a website as well? I should mention here that I’m certainly not trying to put you off—far from it. Instead, I’m trying to reinforce the point that planning is key in any web design project, and although some people swear that “winging it” is the best way to go, most such projects end up gathering virtual dust online. Therefore, before doing anything else, think through why you should build a website and what you’re trying to achieve. Companies and individuals alike have practical and commercial reasons for setting up a website. A website enables you to communicate with like-minded individuals or potential clients on a worldwide basis. If you’re a creative talent of some kind, you can use a website to showcase your portfolio, offering online photographs, music tracks for download, or poetry. If you fancy yourself as a journalist, a blog enables you to get your opinion out there. If you own or work for a business, creating a website is often the most
Chapter 1
efficient means of marketing your company. And even if you just have a hobby, a website can be a great way of finding others who share your passion—while you may be the only person in town who likes a particular movie or type of memorabilia, chances are there are thousands of people worldwide who think the same, and a website can bring you all together. This is perhaps why the paper fanzine has all but died, only to be reborn online, where development costs are negligible and worldwide distribution is a cinch. In practical terms, a website exists online all day, every day (barring the odd hiccup with ISPs), which certainly isn’t the case with printed media, which is there one minute and in the recycle trash the next. Distribution is less expensive than sending out printed material—a thousand-page website can be hosted for $10 per month or less, but sending a thousand-page document to one person (let alone a thousand or several thousand) may cost more than that. Likewise, development (particularly corrections and updates) is often significantly cheaper, too. For example, if you want to rework a print brochure, you have to redesign it and then reprint it. Reworking a section of a website often means swapping out a few files, which is efficient and affordable. So, for large companies and individuals alike, the ability to have relevant information online in a form that can often be updated in mere minutes, thereby keeping all interested parties up-to-date, is hard to resist!
Audience requirements
This book centers on the design and technology aspects of web design, but close attention must always be paid to your potential audience. It’s no good forcing design ideas that result in inappropriate visuals, unusable navigation to all but the most technically minded of people, and huge download times on your site’s unsuspecting visitors. Prior to creating a site, you must ascertain what your audience wants and expects in terms of content, design, and how the site will work (by way of talking to the relevant people, and also, if your budget allows, by using surveys and focus groups). You don’t have to take all of your audience’s ideas into account (after all, many will be contradictory), but be mindful of common themes and ensure they’re not ignored. Technical considerations must be researched. If you’re targeting designers, you can be fairly sure that a large proportion of the audience will be using monitors set to a high resolution and millions of colors, and you can design accordingly. If your site is targeting mobile users, be mindful that it will be displayed on a wide range of devices. From tablets and smartphones with high-resolution Retina or PenTile technology displays to those with low-resolution LCD displays, mobile devices come in all shapes, sizes, and capabilities. Determining the web browsers your audience members use is another important consideration. Although use of web standards (used throughout this book) is more likely to result in a highly compatible site, browser quirks still cause unforeseen problems; therefore, always check to see what browsers are popular with a site’s visitors, and ensure you test in as many as you can. Sometimes you won’t have access to such statistics, or you may just be after a “sanity check” regarding what’s generally popular. A couple of useful places to research global web browser statistics are www.w3schools.com/browsers/browsers stats.asp and www.upsdell.com/BrowserNews/. Note, though, that any statistics you see online are effectively guesswork and are not a definitive representation of the
Chapter 1
Note: If you’re relatively new to web design, you may be wondering about the best platform and software for creating websites. Ultimately, it matters little which platform you choose, as long as you have access to the most popular browsers for testing purposes (a list that I’d now include Apple’s Safari in, alongside Chrome, Internet Explorer, Firefox, and Opera). Regarding software, there’s an overview in Appendix E, but this isn’t an exhaustive guide, so do your own research and find software to your liking.
Why WYSIWYG tools aren’t used in this book
With lots of software available and this book being design-oriented, you might wonder why I’m not using WYSIWYG web design tools. This isn’t because I shun such tools—it’s more that in order to best learn how to do something, you need to start from scratch, with the foundations. Many web design applications make it tempting to “hide” the underlying code from you, and most users end up relying on the graphical interface. This is fine until something goes wrong and you don’t know how to fix it. Removing software from the equation also means we concentrate on the underlying technology that drives web pages, without the distraction of working out which button does what. It also ensures that the book will be relevant to you, regardless of what software you use or your current skill level. Therefore, I suggest you install a quality text editor to work through the exercises or set your web design application to use its code view. Once you’re familiar with the concepts outlined in this book, you can apply them to your work, whatever your chosen application for web design. This level of flexibility is important, because you never know when you might have to switch applications—something that’s relatively painless if you know how to design for the Web and understand technologies like CSS and HTML.
Introducing HTML
The foundation of the majority of web pages is HyperText Markup Language, commonly known by its initials, HTML. A curious facet of the language is that it’s easy to pick up the basics—anyone who’s computer literate should be able to piece together a basic page after learning some tags—but it has enough flexibility and scope to keep designers interested and experimenting, especially when HTML is combined with Cascading Style Sheets (CSS), which we’ll discuss later in this chapter. The HTML5 syntax is designed to be simpler, more flexible, developer-friendly, and backward-compatible than HTML4 and XHTML. HTML5 introduces new features such as animation, offline capabilities, audio, advanced graphics, typography, transitions, and more, which yields a new class of web standards and replaces the need for proprietary technologies, like Flash and native mobile platforms.
An Introduction to Web Design
Introducing the concept of HTML tags and elements
HTML documents are text files that contain tags, which are used to mark up HTML elements. These documents are usually saved with the .html file extension, although other extensions like .htm can be used. The aforementioned tags are what web browsers use to display pages, and assuming the browser is well behaved (most modern ones are), the display should conform to standards as laid out by the World Wide Web Consortium (W3C), the organization that develops guidelines and specifications for many web technologies.
Note: The W3C website is found at www.w3.org. The site offers numerous useful tools, including validation services against which you can check your web pages.
HTML tags are surrounded by angle brackets—for instance,
is a paragraph start tag. It’s good practice to close tags once the element content or intended display effect concludes, and this is done with an end tag. End tags are identical to the opening start tags but with an added forward slash: /. A complete HTML element looks like this:
Here is a paragraph.
This element consists of the following: Start tag: Content: Here is a paragraph. End tag:
Note: HTML doesn’t have a hard-and-fast rule regarding the case of tags. If you look at the source code of HTML pages on the Web, you may see lowercase tags, uppercase tags, or, in the case of pages put together over a period of time, a mixture of the two. That said, it’s still good practice with any markup language to be consistent, regardless of whether the rules are more flexible.
Nesting tags
There are many occasions when tags must be placed inside each other; this process is called nesting. One reason for nesting is to apply basic styles to text-based elements. Earlier, you saw the code for a paragraph element. We can now make the text bold by surrounding the element content with a strong element:
Here is a paragraph.
An Introduction to Web Design
that you do not use such tags and attributes because new implementations of browsers may choose not to support them.
Semantic markup
In the previous few subsections, you may have noticed specific elements being used for specific things. This is referred to as semantic markup and is a very important aspect of modern web design. Plenty of HTML elements exist, and each one has a clearly defined purpose (although some have more than one use). Because of the flexibility of markup languages, it’s often possible to “wrongly” use elements, bashing your page into shape by using elements for design tasks they’re not strictly suited for and certainly weren’t originally designed for. During the course of this book, we’ll talk about semantics a fair amount. Ultimately, good semantic design enables you to simplify your markup and also provides the greatest scope for being able to style it with CSS (see the following section). By thinking a little before you code and defining your content with the correct markup, you’ll end up with cleaner code and make it much easier for yourself in the long run when it comes to adding presentation to your content.
Introducing CSS
CSS is the W3C standard for defining the visual presentation for web pages. HTML was designed as a structural markup language, but the demands of users and designers encouraged browser manufacturers to support and develop presentation-oriented tags. These tags “polluted” HTML, pushing the language toward one of decorative style rather than logical structure. Its increasing complexity made life hard for web designers, and source code began to balloon for even basic presentation-oriented tasks. Along with creating needlessly large HTML files, things like font tags created web pages that weren’t consistent across browsers and platforms, and styles had to be applied to individual elements—a time-consuming process. The concept behind CSS was simple yet revolutionary: remove the presentation and separate design from content. Let HTML deal with structure, and use CSS for the application of visual presentation. The idea caught on albeit slowly. The initial problem was browser support. At first, most browsers supported only a small amount of the CSS standard—and badly at that. But Internet Explorer 5 for Mac made great strides with regard to CSS support, and it was soon joined by other browsers fighting for the crown of standards king. These days, every up-to-date browser supports the majority of commonly used CSS properties and values, and more besides. Another problem has been educating designers and encouraging them to switch from old to new methods. Benefits constantly need to be outlined and proven, and the new methods taught. Most designers these days style text with CSS, but many still don’t use CSS for entire web page layouts, despite the inherent advantages in doing so. This, of course, is one of the reasons for this book: to show you, the designer, how CSS can be beneficial to you—saving you (and your clients) time and money—and to provide examples for various areas of web page design and development that you can use in your sites.
Chapter 1
In this section, we’ll look at separating content from design, CSS rules, CSS selectors and how to use them, and how to add styles to a web page.
Separating content from design
Do you ever do any of the following? Use tables for website layout Hack Photoshop documents to bits and stitch them back together in a web page to create navigation elements and more Get frustrated when any combination of the previous leads to unwieldy web pages that are a pain to edit If so, the idea of separating content from design should appeal to you. On one hand, you have your HTML documents, which house content marked up in a logical and semantic manner. On the other hand, you have your CSS documents, giving you sitewide control of the presentation of your web page elements from a single source. Instead of messing around with stretching transparent GIFs and combining and splitting table cells, you can edit CSS rules to amend the look of your site, which is great for not only those times when things just need subtle tweaking but also when you decide everything needs a visual overhaul. After all, if presentation is taken care of externally, you can often just replace the CSS to provide your site with a totally new design. Designers (and clients paying for their time) aren’t the only ones to benefit from CSS. Visitors will, too, in terms of faster download times but also with regard to accessibility. For instance, people with poor vision often use screen readers to surf the Web. If a site’s layout is composed of complex nested tables, it might visually make sense; however, the underlying structure may not be logical. View the source of a document, and look at the order of the content. A screen reader reads from the top to the bottom of the code and doesn’t care what the page looks like in a visual web browser. Therefore, if the code compromises the logical order of the content (as complex tables often do), the site is compromised for all those using screen readers. Accessibility is now very important in the field of web design. Legislation is regularly passed to strongly encourage designers to make sites accessible for web users with disabilities. It’s likely that this trend will continue, encompassing just about everything except personal web pages. (However, even personal websites shouldn’t be inaccessible.)
The rules of CSS
Style sheets consist of a number of rules that define how various web page elements should be displayed. Although sometimes bewildering to newcomers, CSS rules are simple to break down. Each rule consists of a selector and a declaration. The selector begins a CSS rule and specifies which part of the HTML document the rule will be applied to. The declaration consists of a number of property/value pairs that set specific properties and determine how the relevant element will look. In the following example, p is the selector, and everything thereafter is the declaration:
Chapter 1
This style is applied to HTML elements in any web page the style sheet is attached to using the class attribute, as follows: This heading is red.
This text is red.
This is a paragraph, and this text is red.
If you want a make a class specific to a certain element, place the relevant HTML tag before the period in the CSS rule: p.warningText { color: red; }
If you used this CSS rule with the HTML elements shown previously, the paragraph’s text would remain red, but not the heading or span, because of the warningText class now being exclusively tied to the paragraph selector only. Usefully, it’s possible to style an element by using multiple class values. This is done by listing multiple values in the class attribute, separated by spaces:
The previous example’s content would be styled as per the rules .warningText and .hugeText.
ID selectors
ID selectors can be used only once on each web page. In HTML, you apply a unique identifier to an HTML element with the id attribute:
© 200X The Company. All rights reserved.
To style this element in CSS, precede the ID name with a hash mark (#): p#footer { padding: 20px; }In this case, the footer div would have 20 pixels of padding on all sides. Essentially, then, classes can be used multiple times on a web page, but IDs cannot. Typically, IDs are used to define one-off page elements, such as structural divisions, whereas classes are used to define the style for multiple items.
Grouped selectors
Should you want to set a property value for a number of different selectors, you can use grouped selectors, which take the form of a comma-separated list:
An Introduction to Web Design
h1, h2, h3, h4, h5, h6 { color: green; }
In the preceding example, all the website’s headings have been set to be green. Note that you’re not restricted to a single rule for each element—you can use grouped selectors for common definitions and separate ones for specific property values, as follows: h1, h2, h3, h4, h5, h6 { color: green; }
h1 { font-size: 1.5em; }
h2 { font-size: 1.2em; }
Note: If you define a property value twice, browsers render your web element depending on each rule’s position in the cascade. See the section “The cascade” later in the chapter for more information.
Contextual selectors
This selector type is handy when working with advanced CSS. As the name suggests, contextual selectors define property values for HTML elements depending on context. Take, for instance, the following example:
I am a paragraph.
So am I.
I am a paragraph within the navigation div.
Another paragraph within the navigation div.
You can style the page’s paragraphs as a whole and then define some specific values for those within the navigation div by using a standard element selector for the former and a contextual selector for the latter: p { color: black; }
#navigation p { color: blue; font-weight: bold; }
An Introduction to Web Design
Adding styles to a web page
The most common (and useful) method of applying CSS rules to a web page is by using external style sheets. CSS rules are defined in a text document, which is saved with the file suffix .css. This document is attached to an HTML document in one of two ways, both of which require the addition of HTML elements to the head section. The first method of attaching a CSS file is to use a link tag:
Alternatively, import the style sheet into the style element:
The second of these methods was initially used to “hide” CSS rules from noncompliant browsers, thereby at least giving users of such devices access to the website’s content, if not its design. In some browsers (notably Internet Explorer), however, this can cause a “flash” of unstyled content before the page is loaded. This flash doesn’t occur when a link element is also present. In the full site designs in Chapter 10, you’ll note that both methods are used—@import for importing the main style sheet for screen and link for linking to a print style sheet. The style tag can also be used to embed CSS directly into the head section of a specific HTML document, like this:
You’ll find that many visual web design tools create CSS in this manner, but adding rules to a style element is worth doing only if you have a one-page website or if you want to affect tags on a specific page, overriding those in an attached style sheet (see the next section for more information). There’s certainly no point in adding styles like this to every page, because updating them would then require every page to be updated, rather than just an external style sheet. The third method of applying CSS is to do so as an inline style, directly in an element’s HTML tag:
This paragraph will be displayed in blue.
As you can see, this method involves using the style attribute, and it’s only of use in very specific, one-off situations. There’s no point in using inline styles for all styling on your website—to do so would give fewChapter 1
benefits over the likes of archaic font tags. Inline styles also happen to be deprecated in XHTML 1.1, so they’re eventually destined for the chop.
The cascade
It’s possible to define the rule for a given element multiple times: you can do so in the same style sheet, and several style sheets can be attached to an HTML document. On top of that, you may be using embedded style sheets and inline styles. The cascade is a way of dealing with conflicts, and its simple rule is this:
The value closest to the element in question is the one that is applied. In the following example, the second font-size setting for paragraphs takes precedence because it’s closest to paragraphs in the HTML: p { font-size: 1.1em; }
p { font-size: 1.2em; }
Subsequently, paragraphs on pages the preceding rule is attached to are rendered at 1.2em. If a similar rule were placed as an embedded style sheet below the imported/linked style sheet, that rule would take precedence, and if one were applied as an inline style (directly in the relevant element), then that would take precedence over all others.
Note that it’s possible to import or link multiple style sheets in a web page’s head section. The cascade principle still applies; in other words, any rules in a second attached style sheet override those in the one preceding it.
CSS uses the concept of inheritance. A document’s HTML elements form a strict hierarchy, beginning with html, and then branching into head and body, each of which has numerous descendant elements (such as title and meta for head, and p and img for body). When a style is applied to an element, its descendants— those elements nested within it—often take on CSS property values, unless a more specific style has been applied. However, not all CSS style properties are inherited. See the CSS reference section of this book for more details.
The CSS box model explained
The box model is something every designer working with CSS needs a full understanding of in order to know how elements interact with each other and also how various properties affect an element. Essentially, each element in CSS is surrounded by a box whose dimensions are automated depending on the content. By using width and height properties in CSS, these dimensions can be defined in a specific manner.