A damn dozen of tips for beginners. Part one
Good day!
I am a freelancer. Previously, I didn’t really think about how and what layout designers do. I was doing the server part, and my friend installed and stuffed content. More recently, I wanted to try "what and how." A couple of days ago I came across a material that I really liked. He clearly explained what and how to write. Unfortunately, I can’t give the link, since I didn’t remember where this manual was located, but ... It would seem that you can remember this, but I went one more way - I outlined this case. Actually, welcome to my note.
Are you still using this old, wrinkled, wrinkled doctype?
')
If so, why? It’s time to switch to a new doctype that came to us along with HTML5:
Now you do not need to rush in search of the right doctype (and, as a result, the compatibility mode). HTML5 lets you no longer worry about it, and your head hurts less. If the new doctype meets the old browser, it will simply remain in the standard compatibility mode. Start using and feel the difference!
Previously, you have used similar markup more than once:
But, unfortunately, here we do not see an easy way to add a caption to our image. When developing the HTML5 standard, this was taken into account and this problem was solved by adding the figure element. In combination with figcaption, we can easily assign a title or caption to our image without additional tambourine dances. So, for example:
Let's go further.
Previously, many wrote the following markup:
This is no longer necessary. This meant that at first we were adding a style, and then implementing the script. Now it is not necessary to clearly indicate the type of these miracles.
Indeed, the question. Remember, HTML5 is not XHTML. You should not wrap your attributes in quotes if you do not want to do this. There is nothing shameful and wrong about this, if you feel yourself in such a code as “like a fish in water”:
HTML5 is a new, equally great opportunity for web developers. This feature is changeable content. Imagine, we are reading Wikipedia and suddenly we notice that one of the authors was wrong (well, it does not happen to anyone). With the use of this opportunity, we have the opportunity to just tap the text and literally“in two clicks” in two clicks to correct this text. Here is an example of markup:
Or do it in style tables:
Voila:
Previously, everyone had to provide the usual input fields and check the accuracy of the data on the server side. Now this is done on the client side, without loading our server with unnecessary queries. The old browsers (everyone guesses who I am about) when meeting a new type of inputwill fall down and will be asked to finish them off by rendering a plain text input. This is done very easily. For example:
And it will look like this:
Or like this. Pff ...
This field will immediately warn you that you have entered a non-valid e-mail address. In the case, if everything is good (and IE is always good), the data is sent to us to the server.
Again, earlier we did a hint in the textbox by using wild JavaScript scripting. By clicking on this textbox, the tooltip disappeared. Today we do not need to take care of this - because we have placeholders .
Use, you can not pardon. Like this:
Why?
Now we do not need to fence gardens with id to indicate where the header of our site is (or the title that is the same), and where is the basement. By type of such:
You give a legal, competent in terms of semantics and, accordingly, a validbusiness code. Why not.
Try not to confuse once these elements on your site. Well, you never know, anything can happen.
Older versions of IE don't want to be friends with HTML5. Though kill, than they are now busy at Microsoft. Our task is to make friends with them.
The first way is to use JavaScript and CSS for this. First you need to stylize new elements. So, for example:
But now, unfortunately, IE stilldoes not give in to training, common sense will ignore these tags. Well, you asked for it yourself. We will create them ourselves using javascript:
That's it, Sid. You got caught Now we can use these tags where our soul wants. In order not to repeat the writing of this bike from time to time, Remy Sharp suggested this in order to simplify the learning process of obstinate IE. Include this script in our project should be as follows:
IE is currently being updated and already in some Developer Preview versions, you can test HTML5 support in Internet Explorer. Yes, yes, you heard right - it was HTML5.
Again semantics. Imagine that your site has a block with blog categories, and below the topics themselves. Of course, when you click on a block with categories, existing topics pop out. It is easy to see that these same blocks are in growth relations.Yes, yes - the Adams family .
Now, at the level of semantics, we can prove it. Like this:
Comments are superfluous.
Imagine that we have a registration form. We certainly need to let the user understand that there are input fields that must be filled.
Previously, it was done this way: the user entered the data, sent it to the server by clicking on the“Start” button, and then a script took over, which checked the validity of the entered data format and if any of the required fields were not filled, then we gave the user a mistake.
Now this is easily done on the client side of the client. Simply add the required attribute to the textbox. For example:
What about me? I'm nothing!
In this topic, I wanted and gave advice to beginner web programmers, and to be more precise to the makers, how to write the code.
See you soon!
Introduction
I am a freelancer. Previously, I didn’t really think about how and what layout designers do. I was doing the server part, and my friend installed and stuffed content. More recently, I wanted to try "what and how." A couple of days ago I came across a material that I really liked. He clearly explained what and how to write. Unfortunately, I can’t give the link, since I didn’t remember where this manual was located, but ... It would seem that you can remember this, but I went one more way - I outlined this case. Actually, welcome to my note.
New Doctype
Are you still using this old, wrinkled, wrinkled doctype?
')
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> If so, why? It’s time to switch to a new doctype that came to us along with HTML5:
<!DOCTYPE html> Now you do not need to rush in search of the right doctype (and, as a result, the compatibility mode). HTML5 lets you no longer worry about it, and your head hurts less. If the new doctype meets the old browser, it will simply remain in the standard compatibility mode. Start using and feel the difference!
Figure element
Previously, you have used similar markup more than once:
<img src="path/to/image" alt=" ? !" /> <p>Image of Mars. </p> But, unfortunately, here we do not see an easy way to add a caption to our image. When developing the HTML5 standard, this was taken into account and this problem was solved by adding the figure element. In combination with figcaption, we can easily assign a title or caption to our image without additional tambourine dances. So, for example:
<figure> <img src="path/to/image" alt=" ? !" /> <figcaption> <p> - .</p> </figcaption> </figure> Let's go further.
No more types for script and link elements.
Previously, many wrote the following markup:
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> <script type="text/javascript" src="path/to/script.js"></script> This is no longer necessary. This meant that at first we were adding a style, and then implementing the script. Now it is not necessary to clearly indicate the type of these miracles.
<link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script> Quotes or without quotes - that is the question
Indeed, the question. Remember, HTML5 is not XHTML. You should not wrap your attributes in quotes if you do not want to do this. There is nothing shameful and wrong about this, if you feel yourself in such a code as “like a fish in water”:
<p class = myClass id= someId>, , ?</p> Make your content editable on the go.
HTML5 is a new, equally great opportunity for web developers. This feature is changeable content. Imagine, we are reading Wikipedia and suddenly we notice that one of the authors was wrong (well, it does not happen to anyone). With the use of this opportunity, we have the opportunity to just tap the text and literally
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> </head> <body> <h2> To-Do List </h2> <ul contenteditable="true"> <li> . </li> <li> . </li> <li> - ! </li> </ul> </body> </html> Or do it in style tables:
<ul contenteditable = true> Voila:
E-mail field
Previously, everyone had to provide the usual input fields and check the accuracy of the data on the server side. Now this is done on the client side, without loading our server with unnecessary queries. The old browsers (everyone guesses who I am about) when meeting a new type of input
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> </head> <body> <form action="" method="get"> <label for="email">Email:</label> <input id="email" name="email" type="email" /> <button type="submit"> Submit Form </button> </form> </body> </html> And it will look like this:
Or like this. Pff ...
This field will immediately warn you that you have entered a non-valid e-mail address. In the case, if everything is good (and IE is always good), the data is sent to us to the server.
Dark horse aka placeholders
Again, earlier we did a hint in the textbox by using wild JavaScript scripting. By clicking on this textbox, the tooltip disappeared. Today we do not need to take care of this - because we have placeholders .
Use, you can not pardon. Like this:
<input name="email" type="email" placeholder=" - !" /> Why?
Heading and Basement
Now we do not need to fence gardens with id to indicate where the header of our site is (or the title that is the same), and where is the basement. By type of such:
<div id="header"> <p></p> </div> <div id="footer"> <p> </p> </div> You give a legal, competent in terms of semantics and, accordingly, a valid
<header> 3000 . </header> <footer> -3000 . . </footer> Try not to confuse once these elements on your site. Well, you never know, anything can happen.
Internet Explorer and HTML5 - reality or fiction
Older versions of IE don't want to be friends with HTML5. Though kill, than they are now busy at Microsoft. Our task is to make friends with them.
The first way is to use JavaScript and CSS for this. First you need to stylize new elements. So, for example:
header, footer, article, section, nav, menu, hgroup { display: block; } But now, unfortunately, IE still
document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("hgroup"); document.createElement("nav"); document.createElement("menu"); <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> IE is currently being updated and already in some Developer Preview versions, you can test HTML5 support in Internet Explorer. Yes, yes, you heard right - it was HTML5.
Hgroup element
Again semantics. Imagine that your site has a block with blog categories, and below the topics themselves. Of course, when you click on a block with categories, existing topics pop out. It is easy to see that these same blocks are in growth relations.
Now, at the level of semantics, we can prove it. Like this:
<header> <hgroup> <h1> ... </h1> <h2> . </h2> </hgroup> </header> Comments are superfluous.
Required attribute
Imagine that we have a registration form. We certainly need to let the user understand that there are input fields that must be filled.
Previously, it was done this way: the user entered the data, sent it to the server by clicking on the
Now this is easily done on the client side of the client. Simply add the required attribute to the textbox. For example:
<form method="post" action=""> <label for="someInput"> : </label> <input type="text" id="someInput" name="someInput" placeholder="Bill" required> <button type="submit"></button> </form> What about me? I'm nothing!
Conclusion
In this topic, I wanted and gave advice to beginner web programmers, and to be more precise to the makers, how to write the code.
See you soon!
Source: https://habr.com/ru/post/136592/
All Articles