To help you out, we "ve gathered together a selection of resources that will tell you what you need to know, help you when you" re stuck, and get you expanding your skills in no time.
01. HTML Cheat Sheet
This incredibly helpful HTML cheat sheet includes a full list of all HTML elements, along with descriptions, code examples and live previews. You can organize the tags alphabetically or by category, and even download it as a PDF to refer to later.
02. CSS Cheat Sheet
If you"re just starting out with CSS, merely remembering all the many tags and technical terms can be hugely intimidating. Don"t let that put you off, though; keep this helpful cheat sheet bookmarked, or just print it out, to quickly find the elements you need.
03. CSS-Tricks
When it launched in 2007, this site was all about CSS. Now it "s expanded quite a bit, but there"s still plenty of helpful information and tutorials about CSS and HTML for you to get stuck into. It's definitely worth a visit.
04. CSS Wizardry
CSS is easy to learn but difficult to master. Harry Roberts" CSS Wizardry has some of the best articles on the nitty-gritty of writing scalable and maintainable CSS, like the BEM methodology and refactoring (which are among the hardest parts).
05. CodePen's Yearly Top Pens
One of the best ways to learn HTML/CSS is to dissect cool demos you discover, and CodePen"s yearly Top Pens are great for that. The demos range from cool to "I didn't even know that was possible". CodePen's integrated UI for diving into the code is also convenient. In a similar vein, you might also like to check out our post.
06. Web Design Weekly
HTML and CSS are both constantly evolving. To stay up to date with the latest methodologies and features, we recommend this email newsletter. It comes once a week, which is just often enough that you"ll actually read it.
07. Responsive Design Weekly
Responsive is a vital part of the web designer"s toolkit these days, and to help you keep up to date, Justin Avery spends hours every week curating the best responsive web design content and interviewing industry leaders, and sends it out as a newsletter every Friday (You might also like our post on .)
08. Create non-rectangular layouts with CSS shapes
…Although the syntax of HTML is relatively simple to learn,…there"s, still a lot of elements, attributes and…other concepts that you"re going to need to learn and keep track of.…While this course is intended to introduce you to the essentials of HTML, it"s…really not designed to teach you every single element and attribute available.…So with that in mind, I want to give you a couple of online HTML resources,…that can really help you as you begin learning HTML, and…can serve as valuable references later on, as you"re authoring your own pages.…Now we"re going to start, at the specifications themselves.…
And this is something, two documents that you should definitely have bookmarked.…So, this is the W3Cs version of HTML5.…You can see they have a latest Publisher Version.…You can go see the Editor"s Draft,…if you want to see what "s coming down, down the pipe.…And, this is pretty large.…If I scroll down, you can see that here"s just the Table of Contents.…And I"m not even going to scroll through all of them.…
Resume Transcript Auto-Scroll
Updated
3/30/2017Released
3/16/2015HTML is the programming language that powers the web. And like any language, once you master it, you can begin to create your own content, whether that"s simple websites or complex web applications. This course provides an in-depth look at the essentials: the syntax of HTML and best practices for senior staff author James Williamson reviews the structure of a typical HTML document, and shows how to section pages and format your content with HTML.Plus, learn how to create links and lists, and find out how HTML works with CSS and JavaScript to create rich, engaging user experiences.
Topics include:
- Why is HTML important?
- Exploring an HTML document
- Formatting content
- Display images
- Using nav, article, and div elements
- Linking to pages and downloadable content
- Creating lists
- Controlling styling (fonts, colors, and more)
- Writing basic scripts
Who in the world is sweeter than all, all blush and desirable? Do not think anything vulgar, I mean just a new version of the markup language - HTML5. Latest Versions Modern browsers already understand some HTML5 features, which means it's time to start using it in your projects.
What is HTML5?
At first glance, HTML5 is just a new version markup language. Now, however, this term means something different. Considering HTML5 without mentioning the same CSS3 is simply ridiculous, since it is indispensable to develop truly modern web applications. We must not forget about JavaScript. It implements a call to the rich API described in the HTML5 standard. Summarizing all of the above, a definition suggests itself: HTML5 is a set of modern technologies / standards (JS, HTML5, CSS3, and so on) used to develop web applications.
A drop of history
HTML5 did not come out of nowhere. Its development began in 2007. A specially created group from the W3C consortium was responsible for the development process. But many of the features of HTML5 were invented as part of the Web Application 1.0 standard, and have been poring over it since 2004. So in reality, HTML5 is not such a young technology as it might seem at first glance.
The first draft version of the HTML5 specification became available on January 22, 2008. Three years have passed, but the final version of the specification is still not ready and is unlikely to be in time in the next year or two. This sad moment obliges developers to carefully apply new features in their projects. The specification can easily change, and not all modern browsers(Fire Fox 4, Google Chrome 10, IE9, Opera 11) fully support the new features.
Healthy Recipes
You can talk about the theory of HTML5 for a very long time, but our rubric is called "Coding", so I suggest you feel the possibilities of the standard in practice. I did not bother to create super-original recipes, but decided to give examples of things that are really useful and that you can and should use on your sites right now. So let's go.
Recipe number 1: Turn on Drag & Drop to the fullest
One of the nice things (probably you shouldn't have used so many energy drinks, because there should be the word "chips" - ed.) HTML5 was the ability to use the File API and the Drag and Drop API.
With their help, you can organize a beautiful transfer of files from the user's computer to the server. Do you remember, before, there was always a field with a “Browse” button for sending files? After pressing it, a standard file selection dialog appeared, in which it was required to select a file for transfer. To call this method convenient language does not turn. Especially when it comes to adding multiple files to the download queue.
A little later, the craftsmen began to sculpt apploaders on flash, which provided more functionality, but had a serious drawback - the need for an installed flash. In addition, in both cases, the user did not have the ability to add files to transfer by simply dragging and dropping the mouse onto the page.
But Drag & Drop technology is used in the system all the time. Personally, I always wanted to just select the necessary files and throw them onto the page with a light swipe of the rat. This is much more convenient than scouring for a file using a standard dialog.
HTML5 has made its own adjustments, and now nothing prevents you from organizing a full-fledged Drag & Drop for transferring a file to a page. Googlers in Gmail were the first to implement this feature. If you use gmyla, then you probably noticed an area where you can drag files to attach to the letter. Personally, I actively use this function and now I will show you how to stir up the same for your project. Our project will consist of three files: sample.html, style.css and scripts.js. Of course, we could have limited ourselves to one html file, but then the code would have turned out to be unreadable. No need to mix HTML with JS or CSS. It is better to break everything into files, and then work with them calmly. First of all, let's prepare the structure of our application. Create a sample.html file and write in it:
media="all" href="style.css" />
For the convenience of writing JavaScript code, I included the jquery library. After that, he described the structure of the future html document. It is simple to disgrace - we need to describe the field to which the user must drag and drop files. It only needs one div container. If you now open the page in a browser, then you will not see anything good. To make our field visible visually, we need to style it with CSS. Open the style.css file and write the following code into it:
#box(
width: 500px
height: 300px;
border: 2px dashed #000000;
background-color: #FCFFB2;
text-align: center;
color: #3D91FF;
font-size: 2em
font-family: Verdana, sans-serif;
moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
# label (
position: relative;
top: 2%;
}
The "box" identifier is our future container for receiving files (the user must drag documents onto this area). So that the user does not miss, I make the area larger and choose dashed as the framing option - dotted lines. Regular dotted lines don't look good, so I immediately set the values for the properties: -moz-border-radius and -webkitborderradius. Now you can open the created page in the browser and evaluate the general view.
However, if you try to drag something now, nothing interesting will happen. The dragged file will simply open in a web browser, and that's it. A small piece of JavaScript code will help fix the situation:
$(document).ready(function() (
//Add event handlers
Var mybox = document.getElementById("box")
Mybox.addEventListener("dragent", dragEnter, false);
Mybox.addEventListener("dragexit", dragExit, false);
Mybox.addEventListener("dragover", dragOver, false);
Mybox.addEventListener("drop", drop, false);
});
function dragEnter(evt) (
Evt.stopPropagation();
Evt.preventDefault();
}
function dragExit(evt) (
Evt.stopPropagation();
Evt.preventDefault();
}
function dragOver(evt) (
Evt.stopPropagation();
Evt.preventDefault();
}
function drop(evt) (
Evt.stopPropagation();
Evt.preventDefault();
Varfiles = evt.dataTransfer.files;
varcount = files.length;
If (count > 0)
HandleFiles(files);
}
function handleFiles(files) (
//Get the first file
//If you need to work with multiple
//files, then here you need to organize a search
var file = files;
Document.getElementById("label").innerHTML =
"Caught: " + file.name;
varreader = new FileReader();
Reader.onprogress = handleReaderProgress;
Reader.readAsDataURL(file);
}
function handleReaderProgress(evt) (
If(evt.lengthComputable)(
If (evt.loaded = evt.total) (
alert("Loading...");
}
}
}
At first glance, the code may seem cumbersome and incomprehensible, but those who are at least a little familiar with JavaScript and jQuery should immediately figure out what is happening. At the very beginning, I define the events whose occurrence interests me. For each of them, I describe a separate function. For example, the dragExit event occurs when the user moves the mouse cursor out of the element being dragged. If the user has dragged a file, then the handleFiles() function takes control.
In it, I deliberately refer to the very first file (files) and start working with it. Please note that the user can drag several files at once. If your application should be able to handle such situations, then we will organize an enumeration of the entire files array. The handleFiles() function is where all the fun happens.
First, I display in the label element (remember the “Drag your files here”?) the name of the file that the user dragged onto the hotspot, and then I start reading it using an object of type FileReader (). You can read more about it in this article: html5rocks.com/tutorials/file/dndfiles . Just in case, I define an onProgress event handler for an object of type FileReader(). This event will be called every time a chunk of data is read. In the handler itself, I set a condition: if the amount of downloaded data is equal to the size of the file, then the reading was successfully completed, and you can display a happy message.
Recipe #2: Drink beer, watch videos, listen to rock
Before the advent of HTML5, viewing video on the web was carried out using all kinds of flash players. This is not to say that watching a video in this way is inconvenient. There are only problems in security (recently Flash Player just teeming with vulnerabilities) and the need to install the plugin itself. The HTML5 standard offers an elegant solution - the built-in ability to play video and audio content.
Probably, many have already guessed that I'm talking about tags
Note that in the example for the tag
What could it be useful for? Alternatively, you can insert the logo of your company/project as such an image. Tag
Recipe #3: Where are you now (geolocation API)
Geolocation API - a programming interface for determining the user's coordinates. Based on the data obtained, it is easy to mark the location of the user, say, on Google Maps. Where can this feature be used? Yes, a lot of places! For example, the developers of the popular Twitter microblogging service use the Geolocation API in the web interface of the Twitter client. If the user allows to receive information about his location, then the city in which he is currently located will be added to all his tweets.
I have no doubt that now you are tormented by the question: “Where do GAPI get their location information from?”. Do not even think that spy satellites and other Bond stuff are involved in the case. Everything is much more prosaic - a package of information for analysis is based on data about the IP address, the nearest Wi-Fi hotspots, GPS (if you have a device), GSM cell ID, and so on. If you are interested in the theory and practice of obtaining approximate coordinates from the sources listed above, then I advise you to open the file ][ and find Step's article on this topic, where he thoroughly analyzed the theoretical part, and also gave an overview of the corresponding software. Now let's look at an example of using GAPI. Everything is extremely simple and clear:
Longitude: unknown
Before trying to get the coordinates, you need to make sure that the browser supports GAPI. If the geolocation method returns true, then everything is fine and you can try to get the coordinates. To do this, we use the getGurrentPosition method of the navigator object. If successful, we will get the coordinates that will go straight to the document.
Recipe #4: Database in the Browser
When developing web applications, we are accustomed to using databases. MySQL, SQLite are products familiar to every programmer. The fifth version of HTML brings us another gift - the ability to use a standalone SQLite database. Stop!
It turns out that all data will be stored on the user's computer? Yes exactly. No need to raise a cry that it's not safe. For certain projects, this feature may well come in handy. Unfortunately, not all browsers allow you to work with this database.
For example, IE9 and FF4 do not yet have such an opportunity, so you can only get acquainted with the chip in practice in Google Chrome. I will not give an example of real code, but will show only the general principle of operation:
this.db = openDatabase("xakep", "1.0", "test", 8192);
tx.executeSql("create mytable if not exists " +
"checkins(id integer primary key asc, field_number_one string)",
, function() ( console.log("Request completed successfully"); ));
);
Looking more closely at the above example, you will notice that in general, working with the embedded database is exactly the same as with regular SQLite: we open the database, prepare the query text and execute it.
HTML5.Shutdown()
Whether or not you use HTML5 in your projects is up to you. I think now is the time. If you are professionally engaged in website development, then do not be lazy to embed HTML5 features right now. Of course, do not forget to take care of compatibility - implement support for both modern browsers and legacy ones. You have everything you need for this. Do not slow down and try to make your projects stand out from the rest. Good luck!
How to insure?
Throughout this article, I've said that modern browsers currently support varying amounts of HTML5 features. That is why you need to be careful and try not to use very exotic things. The question immediately arises: “How do you know which HTML5 features a particular browser supports?”. There are several ways to do this, but my favorite is the tiny JavaScript library Modernizr (modernizr.com).
The library is distributed completely free of charge and once you connect it to your project, it will immediately display a list of HTML5 features that your browser supports. To test the functionality of a library, you don't have to download it right away and connect it to your project. You just need to go to the official website of the library and you will immediately see what your walker supports and what does not. See screenshots of visiting the site when Google help Chrome and Internet Explorer 9. Despite a good pr-company and praising articles, Microsoft's rpg clearly supports fewer features than Google Chrome.
HTML5 will move Flash
One of the most interesting chips HTML5 is the ability to create animations. This is achieved by mixing HTML5 and CSS3.
Such animation looks pretty nice and can replace Flash in many cases. I can say with confidence that it will not be very soon, because now Flash is easier to master than to understand obscure HTML5/CSS3 code (IMHO). Nevertheless, you must know about such a feature. I highly recommend that you go through the links below and see with your own eyes beautiful demos that demonstrate the possibility of animation.
- Nice demo showing Canvas's features: feedtank.com/labs/html_canvas ;
- A beautiful 3D box with a built-in search bar from Google: ;
- One click of the mouse, and the page will begin to fill with balls. More clicks - more balls. As you fill the page to the brim - try to drag them sharply. Looks very funny: mrdoob.com/projects/chromeexperiments/ball_pool ;
- Just an awesome demo showing various chemical compounds. Definitely worth a look: alteredqualia.com/canvasmol ;
- Have you ever wanted to feel like a pathologist and explore the mysteries of the human body?
If yes, then this link is for you. Google made a great demo of a mixture of WebGL, HTML5, CSS3 and Flash technologies. The result of the cocktail was an interactive application that shows a 3D human body, in which you can see the structure of the internal organs. When I saw him for the first time, I couldn't put it down.
This page contains materials for individuals involved in the development of standards.
Most of this information is not password protected. However, when accessing some pages, you may need a password.
Code of Conduct
Members of ISO Committees, Working Groups or United for Consensus are encouraged to work according to the principles of the Code of Conduct.
Competition Compliance Guidelines
Compliance with the law in the process of setting standards is important to guarantee the effective functioning of the market and enhance competitiveness, as well as to increase the level of confidence in standards. ISO provides guidance on legal matters to all those involved in the standards development process.
Any questions regarding competition law guidelines can be directed to the ISO legal team at .
Copyright
All participants in standardization activities must respect the copyright of ISO publications and project development, as well as any content related to ISO. These rules are reflected in the Declaration, with which all parties interested in standardization must agree.
Policy in the field of communications of the work of the committee with external parties and the preservation of documents
Participants in ISO standards development processes may be asked (for example, by the media) or may have their own initiative (for example, through social networks) exchange information with external parties on various aspects of the committee's work. ISO has developed an activity policy for these external interactions.
Any questions regarding this policy may be directed to email TMB secretariat: .
Data protection policy
All parties involved in the standardization process have rights and obligations regarding data protection. They are reflected in the Data Protection Policy developed for ISO members, as well as in the Declaration, which must be followed by all parties involved in this process. It applies to data stored in ISO IT services as well as many personal data collected during standardization work (eg attendance lists, minutes).
Explanation of terms and expressions used in ISO standards
International standards and trade
Types of legal sanctions in ISO
ISO has developed a document that summarizes issues related to sanctions and the standards development process.
Engaging Stakeholders and Building Consensus
ISO is committed to ensuring that standards are developed stakeholders and for stakeholders so that the needs of the market will be met more efficiently.
Below you can find documents that provide guidance on how to engage stakeholders.
Loading...