Home » Free Web Development Books. WordPress plugin and theme development are big businesses and you can also create and sell themes and plugins. What you should learn first, where to find good resources to learn web design and development.
Web design and development is a vast topic and I think it is difficult to learn all the languages. There are so many programming and scripting languages. There are different languages for front-end developers and back-end developers. CSS Frameworks make development workflow really fast, simple and easy. Frontend development framework also is known as CSS frameworks. Bootstrap will help you to create a fully responsive and mobile friendly website quickly and easily.
I use Bootstrap to create fully responsive themes and website and Bootstrap make it very simple and easy. If you want to become a WordPress developer and want to create and sell WordPress plugins and themes, you need to learn some most important languages.
There are many free courses and e-books available to learn these languages. HTML is the primary language to create web pages. With HTML tags and elements you define markup of your web pages.
With HTML tags, you define which text is a heading, which text is a paragraph and which text should be bold or italic. You can read complete book Online free. They work hard to add and update content, links, APIs, and actively maintain this fine resource; refreshing and reflecting the relevant and current state of HTML5. JavaScript is one of the most popular and widely used programming languages on the web. Mozilla Developer Network has published very detailed articles and resources about JavaScript.
This includes text, images, tables, forms and everything else that we see on the internet each day. Search engine bots use this order when deciphering which information is most important on a page.
And hit save. The Moment of Truth : Click the newly saved file and your first ever web page should open in your default browser. When we write text in HTML, we also have a number of other elements we can use to control the text or make it appear in a certain way.
Almost everything you click on while surfing the web is a link takes you to another page within the website you are visiting or to an external site. The first part of the attribute points to the page that will open once the link is clicked.
Meanwhile, the second part of the attribute contains the text which will be displayed to a visitor in order to entice them to click on that link. If you are building your own website then you will most likely host all of your pages on professional web hosting. Make a duplicate of the code from your current index. Ensure the folder path to the file page2. Hit save and preview index. If everything is correct then you will see a link which will take you to your second page.
On the second page, there will be a link that will take you to google. The attribute features information for your computer regarding the source , height , width and alt text of the image.
You can also define borders and other styles around the image using the class attribute. However, we shall cover this in a later tutorial. The file types generally used for image files online are :. Alt text is important to ensure that your site is ranked correctly on search sites and also for visually impaired visitors to your site.
Save an image. In web design, there are 3 different types of lists which you may wish to add to your site. For example:. This is better known as a bullet point list and contains no numbers. Now hit save and check out the results in your browser.
If everything worked out then it will display a bullet-pointed table displaying the information above. Another way to keep your website looking neat and orderly is through the use of a table. Do not use a table to layout your website. Search engines hate it and it is generally a bad idea.
See our CSS tutorial , instead. This is definitely the most complicated part of this tutorial, however, learning it will certainly pay off in the long-run. With this in mind, tables can still be a useful way to present content on your page.
Tables can get quite complicated, so be sure to check out our special HTML tables tutorial. However, watch out for these tags so that you can recognize them and use them as your skills develop.
Tables, borders, spacing are usually styled using CSS but we will cover this in a later tutorial. You can now use this knowledge to create your own web pages containing these features and link them together. You may also wish to learn about how to make your pages beautiful using CSS. To do this, you need to add a link elem ent to the head of each and every web page that will be styled using CSS. Our site contains just three pages at the m om ent, so this will be nice and easy.
The link elem ent sim ply links a file to the page on which the elem ent appears; in this case, the linked file is a style sheet.
The href attribute tells the web browser where the style sheet file style1. You should always include these im portant attributes when linking to a. Em pty Elem ent Alert! The link elem ent is another of those special em pty elem ents we discussed earlier in this article: it does not have separate start and end tags. Then, try opening each one in your web browser. All of your paragraphs should now display in bold, blue text.
If you change the color specified in your. Go ahead, give it a try. All we need to do is set som e styles. The nature of the way in which CSS is applied m eans that every elem ent contained in the body elem ent will take on the sam e font unless another font is specified for a given elem ent or elem ents within body —but m ore on that a little later.
Great: Verdana it is! Failing that, please try using Helvetica and, failing that, Arial. If none of the above are installed, just use whatever sans-serif font is available.
Type the above CSS into style1. Save the file, then open the hom epage index. If everything went to plan, your web page all three of them , actually should display slightly differently than they did before. The figure below shows the appearance of our newly-styled hom epage. N ote that w hen y ou refer to a sans-serif font in CSS, y ou m ust hy phenate the tw o w ords, i.
In your text editor, add the following to style1. All the first -level headings now display in the Trebuchet MS font, while everything else displays in Verdana. If y ou have saved the altered file, check that y ou ty ped the CSS exactly as described.
If y ou did, y ou m ay be experiencing a caching problem w ith y our brow ser. Caching is w hen y our brow ser accesses files previously saved to the hard drive w hen y ou visit a given w eb page, rather than dow nloading new files each tim e. For exam ple, y ou enter the URL, and the brow ser pulls the page stored in its cache.
This speeds up the process of display ing a w eb page that has been loaded before. Unfortunately , y our cache can soon becom e out-of -date, and w hen that happens, the page y ou visit m ight not display the m ost recent data. This happens m ost frequently w ith im ages, but it can also occur using CSS files.
Therefore, the am ount of space the cache takes up on y our hard disk before cached content is replaced w ith new er data can be adjusted. Copy the CSS below into your style1. One is to use recognized color nam es such as navy , blue , red , yellow , and so on.
These are easy to rem em ber and spell, but you can be lim ited by the range. Another way of referencing colors is to use a hexadecim al color specification.
This obscure-looking reference e2edff translates to a light shade of blue. You could not, as a beginner, begin to guess that this would be a light blue. Thankfully there are num erous tools on the Web that let you choose a color from a chart often called a color picker , then give you the code to m atch. Colors in HTML are often w ritten as a hexadecim al color specification. You m ight rem em ber the hexadecim al counting sy stem from y our high school m ath class.
Or m ay be y ou w ere asleep up the back of the room. N ever m ind. W ell, y ou do now! W ell, as y ou can see, after w e reach 9, instead of going straight to 10 as w e do w hen counting in decim al w e go through A, B, C, D, E, and F before w e finally hit That gives us six extra digits to use w hen w e count.
Sound confusing? W ell, as it so happens, com puters can count in hexadecim al far better than hum ans can! The key here is that all of those num bers that w e know and love in the decim al sy stem , like 2,, 15,0 0 0 ,0 0 0 , and 42, can be represented in hexadecim al. And Table 3. The values represent the proportions of red the ff part , green the first tw o zeros , and blue the second tw o zeros that are m ixed to create the specified color.
Those three prim ary colors can be com bined to display any color on the screen, sim ilar to the w ay a television set uses different am ounts of red, green, and blue to create a single dot on its screen.
It m ay not surprise y ou, then, to learn that ff w ill give y ou the color red. The line-height property is an interesting one. Try tweaking this value, save your CSS file, and see how the new value affects the text on your web page.
The padding property is used to provide space between the outside edge of the elem ent in question and the content that sits inside it. We m entioned pixels before, when we specified the size of an im age, but what is a pixel? Basically, one pixel is one of the tiny dots that m ake up what you see on the com puter screen.
Font-size keywords range from xx-small to xx-large and offer a quick way to style text. There are so m any m ore from which you can pick and choose—too m any possibilities, in fact, for us to be able to list them all here. However, this section lists som e of the basic properties and values with which you m ight like to experim ent. Feel free to try any of these in your CSS file. Be sure to provide options that users are likely to have on their com puters e. Arial, Verdana, etc.
Relative font sizes are definitely the preferred option. Before y ou experim ent using the CSS properties above, it m ight be an idea to m ake a backup of y our CSS file, just in case y ou run into difficulties.
Rem em ber that y ou can dow nload all the exam ples used in this chapter from the code archive if y ou accidentally m angle y our CSS file. Our site now boasts a CSS file using a selection of attractive styles. As you can see, em phasis elem ents appear in italics by default. Open style1.
Does your page look like the figure below? Now, whenever you add an em elem ent to any web page of your site assum ing that page is linked to style1. Presum ably, the default styles that browsers use were selected carefully; how can you be sure that redefining the styles is a good idea? They probably are. Perhaps a com prom ise is in order. W hy not? W ell, m arking text as i say s nothing about its m eaning; i only com m unicates how it should be presented on the screen.
Such elem ents are referred to as presentational HTML elem ents, and they should be avoided. Likew ise, the b elem ent for bold , another old HTML elem ent, should not be used. The preferred option is to use strong or, if y ou just w ant to display headings in bold, use CSS.
W hy is this im portant? It m ight not seem a big deal as y ou look at the italicized text in y our w eb brow ser. But im agine if y ou w ere blind, and y ou used softw are that read w eb pages aloud to y ou, instead of display ing them on the screen.
This program called a screen reader m ight read text m arked up w ith an em elem ent using slight em phasis, and text m arked up w ith strong in a m ore pow erful voice though this, of course, depends on the screen reader being used. But w hat w ould it do w ith text m arked up w ith i or b?
W ell, these elem ents say nothing about the m eaning of the text, so it w ould not treat them in any special w ay —thus potentially losing the m eaning that y ou w ere try ing to convey. A search engine e. One other presentational tag that y ou m ight see others use, but should never copy , is the u elem ent.
W rap this around som e text and needless underlining occurs that only serves to confuse users. A pen or a sheep? Well, the answer is either, depending on the context. After all, you spend m any hours a week rounding up herds of sheep into a big, solid pen. Context can change a situation quite drastically, and we can use context to our advantage in CSS. We can style an elem ent in a num ber of different ways, depending on its position. Can you spot which one it is?
The fact that this particular paragraph is contained within a specific div elem ent—which has an id attribute of tagline —can be useful. Your page should now look sim ilar to the one shown below. Perhaps a CSS-to-English translation is required. Con t e x t u a l Se le ct or s tagline p is known as a contextual selector.
Plus, once you have a lot of styles on the page, it is even m ore difficult to m aintain. You can! Edit your CSS file style1. You should be looking at a page like the one shown in Figure 3. That CSS really does kill several birds with one stone figuratively speaking, of course; I did say no anim als would be harm ed! Not only do you have the convenience of being able to style m any pages from one central location your CSS file , but you have the added convenience of being able to style m any elem ents in one go.
Your CSS file becom es easier to m anage and—a nice little side -benefit— sm aller, and therefore quicker to download. The nam e is deliberate. You m ight w ant to add another sty le to y our w eb site at a later date, and num bering is a basic w ay to keep track of the sty les y ou can apply to a site.
For exam ple, y ou can edit marine. But som ething interesting is happening in our CSS file: it appears that we m ay have a conflict in our rules. Or have we? Re ca ppin g Ou r Pr ogr e ss Tim e for another breather. What have we learned? That topic is links. St ylin g Lin k s Links are everywhere on the Web: they truly are the basis of everything you see online.
Try adding that to your style1. In CSS, you can change the styling of all these link states using pseudo -classes, which sounds com plicated but really is fairly straightforward.
Adding pseudo-classes to your style sheet m eans the browser applies the rule when the elem ent is in the state specified by the pseudo-class.
There are no restrictions on allowed values, and the browser will automatically detect the correct file extension and add it to the file. Specify a value for the download attribute, which will be the new filename of the downloaded file "w3logo. We just launched W3Schools videos. Get certified by completing a course today!
0コメント