The book "Web Development. Comprehensive Guide »

In fact, this book is a personal trainer for creating websites. You will begin by learning how to create traditional web pages using the standards on which each page on the World Wide Web is based (these are HTML and CSS). Then you will learn about services from companies such as Google, and they will teach you how to count the number of visitors, help you promote the site and even get some money. You will briefly familiarize yourself with the JavaScript programming language that is used on almost every interactive page on the World Wide Web.
In short, this book will be an excellent guide for people who want to create a website from scratch, which will have all the features of modern websites. This edition will also be a starting point for those who want to delve into the field of web design. If you belong to any of the above categories, welcome aboard!

Book structure

The book is divided into five parts, each of which in turn consists of several chapters.

Part I. Creating simple web pages. In this part you will get basic information about HTML, the language of creating websites (chapters 1 and 2); then learn about the CSS language, which allows you to add colors, fonts, and borders (Chapter 3), as well as images on the pages (Chapter 4); and finally, you will understand how you can simplify your life using HTML-editors (Chapter 5).

Part II. From web pages to sites. This section explains how to merge web pages into a website. You will learn how to link the pages together (Chapter 6), create the style of the entire site in a few steps (Chapter 7) and learn how to design stylish layouts (Chapter 8). Finally, you will learn how to place your pages on the World Wide Web, using the services of a hosting company (Chapter 9).
')
Part III. Communication with the audience. In this section, you will learn how to make your website accessible to search engines such as Google (Chapter 10), and learn how to attract visitors (Chapter 11). In addition, you will learn what blogs are and get acquainted with free software for creating them (chapter 12). And finally, you will learn how to make money on your website, displaying ads or selling any products (Chapter 13).

Part IV. Interactive and multimedia content. Now that you have learned how to create a professional working site, why not add original elements to it, such as bright buttons and pop-up menus? You don’t have to learn advanced JavaScript programming techniques, but you’ll learn how to find and use free scripts on your website (Chapters 14 and 15). You can also have a little fun by adding video clips and an MP3 player to the site (Chapter 16).

Part V. Applications. At the end of the book are two applications. The first one provides useful web links for ambitious web designers who want to improve their skills. The second appendix provides a quick reference for the HTML language. It explains the basic elements of HTML and provides links to more detailed descriptions in various chapters of this book.

Excerpt
Shortening the code using the div element

Due to the inheritance of styles (see the Inheritance Mechanism subsection of the Styles overlay section of Chapter 3), elements inside the div container inherit many properties from the parent div element, such as font size and field width. If you set the font-size property in a div element that contains paragraphs in the text of publications, they will all be formatted.

After adding frames to publications, you can use inheritance for your own purposes. For example, instead of assigning a font size of 16 pixels to the p.review and p.reviewEnd classes , you can set the font size immediately for the div.review class, which in turn replaces the corresponding property of the p.byline class.

You can cut the markup even further by adding the div.intro class and combining the two intro paragraphs at the top of the page. This way you can set the text color.

/*  . */ div.intro { color: #9C9C9C; margin-bottom: 40px; } 

Now you don’t need the p.intro class at all . You can remove it from the style sheet and remove the class attribute from the two intro paragraphs.

If these changes seem insignificant to you, remember that usually the style sheet contains tens or hundreds of rules. Some small changes, such as those we just looked at, can simplify it a bit.

The div element provides an excellent opportunity to reduce page load time, which professional web designers use all the time. But the following method can help you further improve the markup.

Shrinking code with contextual selectors

By adding a class to each element, you can format objects very quickly. However, in the above example, to each paragraph after the author's name, you must add the attribute class = "review" . Fortunately, the div element and the new selector type, which is called the context selector, can save a lot of time.

The context selector corresponds to an element inside another element. To understand the difference, take a look at this type selector:

 b { color: red; } 

This selector formats all bold text in red. But what if you only want to work with bold text that appears inside a bulleted list? You can do this by using the following context-type selector, which finds the elements of a bulleted list (ul) and then hunts for bold elements inside them. In the following example, bold text is colored red:

 ul b { color: red; } 

To create a context type selector, you put a space between two elements.
Contextual selectors are useful, but thinking through the various possibilities of combining elements can make you dizzy. You will see the real benefit of using the context selector when you apply it to format an element of a particular type within a particular class. For example, imagine what happens if you apply the following style sheet rule:

 h2.review { 

and change the selector to the following:

 div.review h2 { 

The first part of this selector finds all the div elements on your page. The second part restricts those that correspond to div elements with the class name review . The third part of the selector locates the h2 headers inside the div elements. The end result is that each heading in the second level of the publication will be formatted accordingly, while the rest of the page headings will remain unchanged.

You can remove the class attribute from the h2 element, leaving the following simple markup:

 <div class="review"> <h2>...</h2> 

This action can be repeated to format img or a elements in publications without resorting to class names. You can even format regular paragraphs within divs , but in this case, you need to be careful. This is because CSS considers context selectors to be more specific than type selectors or classes.

For example, imagine that you want to create a rule for paragraph formatting using the following context selector:

 div.review p { 

You need this rule to apply to all paragraphs of the publication, with the exception of the author’s name at the beginning and the link at the end. Ideally, in the markup of the publication you would like to use only the following three classes:

 <div class="review"> <h2>...</h2> <p class="byline">...</p> <p>...</p> <p>...</p> <p>...</p> <p class="reviewEnd">...</p> </div> 

Here you will encounter a problem, because the browser ignores the formatting in the byline and reviewEnd classes . This is because the browser decides that these class rules are less specific than the new paragraph rule that the context selector uses.

To solve this problem, you need to change the classes byline and reviewEnd. The easiest way to make them more specific is to change using the context selector. In other words, instead of creating a rule that applies to any paragraph that uses the byline class, you must create a rule that applies to any paragraph that uses the byline class and is inside the publication:

 div.review p.byline { 

This will fix the problem. First of all, this solution allows you to simplify the markup. Now you need to apply classes to each publication in just three places: in the container div of the actual text of the publication, in the author’s name and in the link at the end. You no longer need to add a class to regular paragraphs or headings.

Context selectors are a very popular way to define different formatting rules for different sections of a page. If you look at stylesheets created by other users (and we recommend doing this in order to get acquainted with new methods and improve your skills with CSS), you will see many div elements and contextual selectors in your work.

If you are confused in the rules of the stylesheet and do not know which ones are no longer needed, study the following listing, which lists all the rules of the new version of the stylesheet of the site with publications:

 /*        */ body { ... } /*     */ p { ... } /*        */ img { ... } /*    */ h1 { ... } /*      */ div.main { ... } /*   */ div.intro { ... } /*    */ div.review { ... } /*   */ .review h2 { ... } /*   */ .review p { ... } /*   */ .review .byline { ... } /*      */ .review .reviewEnd { ... } 

about the author

Matthew MacDonald (Matthew MacDonald) is a scientific and technical author of several dozen books. Using books like WordPress: The Missing Manual and HTML5: The Missing Manual1, he introduced many readers to the World Wide Web. In addition, in the publications Your Brain: The Missing Manual and Your Body: The Missing Manual, he demonstrated to people the full strength and capabilities of their brain and body.

About the creative team

Peter McKie (ed.). I had the pleasure to work on previous versions of this book. He lives in New York, where he studies the history of abandoned buildings and sometimes puts them in order. Email address: pmckie@gmail.com.

Kara Ebrahim ( production editor). Lives and works in Cambridge. She loves to do graphic design and spend time outdoors. Email address: kebrahim@oreilly.com.

Shelley Powers (technical reviewer). The developer of the sites and the author of technical books, lives in St. Louis, Missouri. Her interests include programming languages ​​HTML5, JavaScript, and other web technologies.

Julie Van Keuren (proofreader). She quit a newspaper in 2006 to move to Montana and realize her dream of becoming a freelancer. She and her husband (who writes novels) raise two sons - Dexter and Michael. Email address: little_media@yahoo.com.

Ron Strauss ( compiler of the original index). Specializes in the compilation of subject indexes in the literature on information technology. In his free time, he plays the viola. He lives in Northern California with his wife and at the same time a colleague of Annie, as well as with the miniature pinscher Kenga. Email address: rstrauss@mchsi.com.

»More information about the book can be found on the publisher's website.
» Table of Contents
» Excerpt

For Habrozhiteley 25% discount coupon - Creating a Website

Our partner "Netologiya" has courses in the following areas: HTML and CSS, JavaScript, Node, Python, PHP, etc. On the coupon piter_prog discount of 5,000 rubles until November 20.