DEV Community

iddahmukami
iddahmukami

Posted on

ULTIMATE HTML&CSS GUIDE

The only things you need in order to learn HTML and CSS documentation more with a computer with a web browser and a text editor (such as Notepad, which comes with Windows, or TextEdit, which comes with Macs).
Is it hard to Learn?
Many books that teach HTML and CSS resemble dull manuals. To make it easier for you to learn, we threw away the traditional template.
At work, when people look at my screen and see it full of code, it's not unusual to get a comment about it looking very complicated or how clever I must be to understand it. The truth is, it's not that hard to learn how to write web pages and read the code used to create them; you certainly don't have to be a "programmer." Understanding HTML and CSS can help anyone who works with the web; designers can create more attractive and usable sites, website editors can create better content, marketers can communicate with their audience more effectively, and managers can commission better sites and get the best out of their teams. I've focused on the code you need to use 90% of the time and omitted the code that you would rarely see even if writing websites is your full time job. By the end of the book, if you come across the other 10% you will be able to Google it to find out what it means quickly and easily. I have also added practical information on topics I am commonly asked about, such as how to prepare images, audio and video for the web, how to approach the design and build of a new site, how to improve your rankings in search engines (SEO), and how to use Google Analytics to learn about visitors to your site.

Structure of HTML & CSS:

1: HTML We will spend the first chapter looking at how HTML is used to create web pages. You will see that you start by writing down the words you want to appear on your page. You then add tags or elements to the words so that the browser knows what is a heading, where a paragraph begins and ends, and so on. The rest of this section introduces the tags you have at your disposal to create web pages, grouped into chapters on: text, lists, links, images, tables, forms, video audio and flash, and miscellaneous elements. I should warn you that the examples in the first nine chapters are not exciting to look at, yet they are the foundation of every web page. The following chapters on CSS will show you how to make your pages look a lot more interesting.
2: CSS We start this section with a chapter that explains how CSS uses rules to enable you to control the styling and layout of web pages. We then go on to look at the wide variety of CSS properties you can use in your CSS rules. These properties generally fall into one of two categories: Presentation: How to control things like the color of text, the fonts you want to use and the size of those fonts, how to add background colors to pages (or parts of a page), and how to add background images. Layout: How to control where the different elements are positioned on the screen. You will also learn several techniques that professionals use to make their pages more attractive.
3: Practical We end up with some helpful information that will assist you in building better websites. We look at some new tags that will be introduced in HTML5 to help describe the structure of your pages. HTML5 is the latest version of HTML (still under development at the time of writing). Before learning about these elements, you need a good grasp of how CSS is used to control the design of web pages. There is a chapter that talks you through a design process that you might like to follow when creating a new website. Finally, we end up looking at topics that will help you once you have built your site, such as putting it on the web, search engine optimisation (SEO) and using analytics software to track who comes to your site and what they are looking at.

How People Access the Web
Before we look at the code used to build websites it is important to consider the different ways in which people access the web and clarify some terminology.
Browsers People access websites using software called a web browser. Popular examples include Firefox, Internet Explorer, Safari, Chrome, and Opera. In order to view a web page, users might type a web address into their browser, follow a link from another site, or use a bookmark. Software manufacturers regularly release new versions of browsers with new features and supporting new additions to languages. It is important, however, to remember that many computer owners will not be running the latest versions of these browsers. Therefore you cannot rely on all visitors to your site being able to use the latest functionality offered in all browsers.
Web Servers When you ask your browser for a web page, the request is sent across the Internet to a special computer known as a web server which hosts the website. Web servers are special computers that are constantly connected to the Internet, and are optimized to send web pages out to people who request them. Some big companies run their own web servers, but it is more common to use the services of a web hosting company who charge a fee to host your site.
Devices People are accessing websites on an increasing range of devices including desktop computers, laptops, tablets, and mobile phones. It is important to remember that various devices have different screen sizes and some have faster connections to the web than others.
Screen readers Screen readers are programs that read out the contents of a computer screen to a user. They are commonly used by people with visual impairments. In the same way that many countries have legislations that require public buildings to be accessible to those with disabilities, many laws have also been passed that require websites be accessible to those with disabilities. Throughout this book you will see several references to screen readers. These notes will help ensure that the sites you create are accessible to people who use such software. It is interesting to note that technologies similar to those employed by screen readers are also being used in other areas where people are unable read a screen, such as when they are driving or jogging.
How the World Wide Web (WWW) works:
How the web works provides a simplified view of what happens when you view a webpage in a web browser on your computer or phone.
This theory is not essential to writing web code in the short term, but before long you'll really start to benefit from understanding what's happening in the background.

Although early computers were pretty incompatible, almost all of them could store or process information using ASCII (American Standard Code for Information Interchange), sometimes known as "plain text." In ASCII, the numbers 0–255 are used to represent letters, numbers, and keyboard characters like A, B, C, 1, 2, 3, %, &, and @. Berners-Lee used ASCII to come up with two basic systems of rules (known in computer terminology as protocols). If all the computers at CERN followed those two rules, he realized they could exchange any information very simply.
He called the first rule HTTP (HyperText Transfer Protocol). It is essentially a way for two computers to exchange information through a simple "conversation," whether they're sitting next to one another in the same room or on opposite sides of the world. One computer (which is called a client and runs a program called a web browser) asks the other computer (which is called a server or web server) for the information it needs with a series of simple messages. The web browser and the web server then chat away for a few seconds, with the browser sending requests for the things it wants and the server sending them if it can find them. The HTTP conversation between a web browser and and a web server is a bit like being at a dinner table when someone says: "Pass the salt, please", someone else says "Here it is", and the first person says "Thank you." HTTP is a sort of simple, polite language that all computers have learned to speak so they can swap files back and forth over the Internet.

Top comments (0)