background preloader

HTML

Facebook Twitter

HTML & CSS. HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages and Web Applications. Learn more below about: What is HTML? HTML is the language for describing the structure of Web pages.

HTML gives authors the means to: Publish online documents with headings, text, tables, lists, photos, etc. With HTML, authors describe the structure of pages using markup. What is XHTML? XHTML is a variant of HTML that uses the syntax of XML, the Extensible Markup Language. What is CSS? CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. What is WebFonts? WebFonts is a technology that enables people to use fonts on demand over the Web without requiring installation in the operating system. Examples. The W3C Markup Validation Service. Web standards checklist. Date: 13 August 2004 Author: Russ Weakley Web standards – more than just ‘table-free sites’ The term web standards can mean different things to different people. For some, it is ‘table-free sites‘, for others it is ‘using valid code‘. However, web standards are much broader than that.

A site built to web standards should adhere to standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) and pursue best practices (valid code, accessible code, semantically correct code, user-friendly URLs etc). In other words, a site built to web standards should ideally be lean, clean, CSS-based, accessible, usable and search engine friendly. About the checklist This is not an uber-checklist. To show the breadth of web standardsas a handy tool for developers during the production phase of websitesas an aid for developers who are interested in moving towards web standards The checklist 1. 1.1 Does the site use a correct Doctype? More: 1.2 Does the site use a Character set? Character encodings W3C Link checker. Free online meeting scheduler / meeting planner / date planner / appointment booking tool : my events : AgreeAdate lets you choose whether to list your invitees and send emails to them from within the system, or to use your own email software to send an invitation with a special link.

The advantage of adding the details for each invitee is that agreeAdate knows who they are when they click on their unique link in their invitation email and allows you to send personalised reminder emails, etc. If you don't need this ability and just want to include a single link in an email, blog or web page then use the link provided above. You can mix the two methods if you like, specifying some of the invitees but then distributing the general link for any others that may be interested in attending.

To add invitees into the table above, just type into the empty boxes at the bottom. You can return to this step at any time to add more people. Emails are only sent once you have pushed the button below the table. You can organise your address book contacts into groups. Objects, Images, and Applets in HTML documents. 13.1 Introduction to objects, images, and applets HTML's multimedia features allow authors to include images, applets (programs that are automatically downloaded and run on the user's machine), video clips, and other HTML documents in their pages. For example, to include a PNG image in a document, authors may write: <BODY><P>Here's a closeup of the Grand Canyon: <OBJECT data="canyon.png" type="image/png"> This is a <EM>closeup</EM> of the Grand Canyon.

</OBJECT></BODY> Previous versions of HTML allowed authors to include images (via IMG) and applets (via APPLET). They fail to solve the more general problem of how to include new and future media types. To address these issues, HTML 4 introduces the OBJECT element, which offers an all-purpose solution to generic object inclusion. The new OBJECT element thus subsumes some of the tasks carried out by existing elements. The chart indicates that each type of inclusion has a specific and a general solution. Attribute definitions src = uri [CT] Objects, Images, and Applets in HTML documents. 13.1 Introduction to objects, images, and applets HTML's multimedia features allow authors to include images, applets (programs that are automatically downloaded and run on the user's machine), video clips, and other HTML documents in their pages. For example, to include a PNG image in a document, authors may write: <BODY><P>Here's a closeup of the Grand Canyon: <OBJECT data="canyon.png" type="image/png"> This is a <EM>closeup</EM> of the Grand Canyon.

</OBJECT></BODY> Previous versions of HTML allowed authors to include images (via IMG) and applets (via APPLET). These elements have several limitations: They fail to solve the more general problem of how to include new and future media types. To address these issues, HTML 4 introduces the OBJECT element, which offers an all-purpose solution to generic object inclusion. The new OBJECT element thus subsumes some of the tasks carried out by existing elements.

To include images, authors may use the OBJECT element or the IMG element. declare [CI] Dave Raggett's Introduction to HTML. Dave Raggett. Having mastered the basics, it is time to move on to more advanced features. The following will teach you how to: force line breaks introduce non-breaking spaces use entities for special characters link into the middle of pages use preformatted text flow text around images define clickable regions within images create tables use roll-overs and other tricks enable users to listen to sound files p.s.

I recommend you use HTML Tidy to keep your markup clean and free of errors. How to force line breaks Just occasionally, you will want to force a line break. <p>The Willows<br> 21 Runnymede Avenue<br> Morton-in-the-marsh<br> Oxfordshire OX27 3BQ</p> The br element never needs an end-tag. How to introduce non-breaking spaces Browsers automatically wrap text to fit within the margins. Sweetened carbonated beverages, such as Coca&nbsp;Cola, have attained world-wide popularity. It is bad practice to use repeated non-breaking spaces to indent text. How to use entities for special characters. Dave Raggett's Introduction to HTML. Dave Raggett, revised 24 May 2005. This is a short introduction to writing HTML.

What is HTML? It is a special kind of text document that is used by Web browsers to present text and graphics. The text includes markup tags such as <p> to indicate the start of a paragraph, and </p> to indicate the end of a paragraph. HTML documents are often refered to as "Web pages". The browser retrieves Web pages from Web servers that thanks to the Internet, can be pretty much anywhere in World. Many people still write HTML by hand using tools such as NotePad on Windows, or TextEdit on the Mac.

P.s. a good way to learn is to look at how other people have coded their html pages. For Mac users, before you can save a file with the ".html" extension, you will need to ensure that your document is formatted as plain text. This page will teach you how to: start with a title add headings and paragraphs add emphasis to your text add images add links to other pages use various kinds of lists Start with a title <! Starting with HTML + CSS. This short tutorial is meant for people who want to start using CSS and have never written a CSS style sheet before. It does not explain much of CSS. It just explains how to create an HTML file, a CSS file and how to make them work together. After that, you can read any of a number of other tutorials to add more features to the HTML and CSS files.

Or you can switch to using a dedicated HTML or CSS editor, that helps you set up complex sites. At the end of the tutorial, you will have made an HTML file that looks like this: The resulting HTML page, with colors and layout, all done with CSS. Note that I don't claim that this is beautiful ☺ Sections that look like this are optional. Step 1: writing the HTML For this tutorial, I suggest you use only the very simplest of tools. Don't use a wordprocessor, such as Microsoft Word or OpenOffice. Step 1 is to open your text editor (Notepad, TextEdit, KEdit, or whatever is your favorite), start with an empty window and type the following: <! <! Understanding HTML5 semantics – Part 2: Document structure and global attributes. To learn more, check out Derek Featherstone's tutorial on ARIA and accessibility in the wild at SitePoint.

The draggable and dropzone attributes These two attributes were placed together since they're part of the new drag and drop API (DnD API). For the draggable attribute, there are three states: true, false, and auto (auto is not a keyword, it's simply the missing value default). According to the W3C HTML5 Working Draft: "The true state means the element is draggable; the false state means that it is not. The auto state uses the default behavior of the user agent. " If you're going to drag something, you need to be able to drop it too. Support for these attributes is good (in all browsers except Opera—including Android), though with dropzone, you will need to get into a bit of JavaScript.

The hidden attribute Here's the W3C HTML5 Working Draft on the hidden attribute: "The hidden attribute is a boolean attribute. Of course, you're going to have to manipulate this attribute with JavaScript.