YaBB - Yet another Bulletin Board

Welcome, Guest. Please Login or Register

 
  Home English Norsk HelpLoginRegisterSearch  
 
 

Forum @ Liavaag.org › English general category › General bulletin board › HTML5 - Hypertext Markup Language

(Moderator: Administrator)
‹ No Topic | Next Topic ›
Pages: 1 2 3 
Send Topic Print
HTML5 - Hypertext Markup Language (Read 673664 times)
07/03/09 at 02:08:42  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
HTML5 – The New Markup Language


XHTML 2 language dumped in favour of HTML 5! Where is the semantic web going now – back to nesting and tidy errors?


It seems that that HTML 5 is proceeding while the XHTML is recognized as a rat hole. XHTML 2 Working Group's charter expires at the end of 2009 and the W3C management has decided not to renew it. Some sources say that the maintenance work of fixing bugs will be continued on XHTML 1.1. Does this mean that we’re stuck with the XHTML 1.1?


Perhaps we better go for the new HTML 5, which is developed by the Web Hypertext Application Technology Working Group (WHATWG). This team has developed a proposal for Web Forms 2.0, and Web Applications 1.0. HTML 5 focuses on web application development and offers browser based applications as multimedia. This could present strong competition to existing browser plug-in technologies such as Adobe Flash and Microsoft Silverlight.


This might be the necessary changes of standards we have been waiting for to fulfil the idea about social semantic web. Probably XHTML is too strict for artificial intelligence and stupid computers.

Sources

« Last Edit: 02/11/14 at 02:32:23 by Administrator »  
Back to top 
 
IP Logged
 
Reply #1 - 02/23/10 at 02:47:38  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
HTML5 is a new version of HTML and XHTML


The goal of HTML 5 is to reduce development costs by making strict rules on how to handle all elements (and how to recover from errors). HTML5 introduces new elements often used in modern web sites. Some of those are semantic replacements. HTML 5 is not a W3C recommendation yet!

New tags (and some replacements)

New Tags Definitions
<article> Article
<aside> Content aside from the page content
<audio> Sound content
<canvas> Graphics
<command> Command button
<datalist> Dropdown list
<dialog> Dialog
<embed> Interactive content or plugin
<figcaption> Caption of a figure element
<figure> Group of media content and their caption
<footer> Footer (section or page)
<header> Header (section or page)
<hgroup> Information about a section in a document
<keygen> Generated key in a form
<mark> Marked text
<meter> Measurement within a predefined range
<nav> Navigation links
<output> Output types
<progress> Progress of a task of any kind
<rp> Ruby annotations for browsers that not support the ruby element
<rt> Explanation to ruby annotation
<ruby> Ruby annotations
<section> Defines a section
<source> Media resources
<time> Date and time
<video> Video
« Last Edit: 03/15/11 at 05:24:04 by Administrator »  
Back to top 
 
IP Logged
 
Reply #2 - 09/17/10 at 04:45:16  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
XHTML is not dead!

Document Object Model (DOM) describes how HTML and XML is represented. DOM is cross-platform and language independent, but aspects may be manipulated within the syntax of the programming language. The HTML syntax is suggested for most authors because it is compatible with most browsers.

Documents transmitted with HTML MIME type text/html will be processed as an HTML5 document by the browsers. If documents are transmitted with XML MIME type application/xhtml+xml, they will be parsed by an XML processor. The documents will be treated as XML documents by the Web browsers, and defines the XHTM5 specifications.

Minor syntax errors in HTML will be ignored, but as in XHTML 1.1, the XHTML5 will not render fully out. DOM, HTML syntax, and XML will not represent the same content. HTML can render documents with noscript blocks, but it can not render namespaces. Noscript blocks are not supported in DOM and XML, but namespaces are. Comments with the string "-->" supported by DOM, but are not represented in HTML or XML.


Kilder
 
Back to top 
 
IP Logged
 
Reply #3 - 01/28/11 at 19:40:13  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
W3C HTML5 Logo


The Technology - description of the badge below
  1. Connectivity
  2. CSS3 Styling
  3. Device Access
  4. 3D, Graphics, Effects
  5. Multimedia
  6. Performance & Integration
  7. HTML5 Semantics
  8. Offline & Storage
 
HTML5-Logo.png (17 KB | 903 )
HTML5-Logo.png
Back to top 
 
IP Logged
 
Reply #4 - 03/15/11 at 05:41:03  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
Updates and new tags in HTML5


I have now started the project of converting some of my photo galleries to HTML5. Surprisingly, some of those photo galleries witch had an error per image, does now validate (WCAG AAA 2.0).





Those photo albums are very close validating with doctype HTML5. With XHTML 1.1 they had at least one error per image.





Below some new tags in HTML5

New Tags Definitions
<details> Caption of a figure element
<summary> Defines the header of a "detail" element
<wbr> Possible line-break
« Last Edit: 05/04/12 at 21:49:04 by Administrator »  
Back to top 
 
IP Logged
 
Reply #5 - 10/21/12 at 03:39:33  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
Finally HTML5 websites that validate


No news lately except that HTML5 becomes official web standards in 2014 - and there are plans for a sequel. It is also said that HTML5.1 will come in 2016 and the first draft of HTML5.2 will be published in 2015.

Liavaag.org has during the summer updated the 360 tour News Portal to HTML5. This Portal are build upon the London2012 Olympic Portal. Both portals validate.

  Smiley
 
Back to top 
 
IP Logged
 
Reply #6 - 11/13/12 at 02:50:49  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
CSS3 – list-style-type

Many web-developers got a cold shower when they found out that their CSS3 (Cascading Style Sheet) no longer validated. Earlier unordered HTML lists (listed items) used the following types: "disc", "circle", "square", "decimal", "decimal-leading-zero", "lower-roman", "upper-roman", "lower-greek", "lower-alpha", "lower-latin", "upper-alpha", "upper-latin", "hebrew", "armenian", "georgian", "cjk-ideographic", "hiragana", "katakana", "hiragana-iroha", "katakana-iroha", "none", or "inherit".

Code (CSS):
/*
Example of listed items
*/
ul {
	display: block;
}
li {
	list-style-type: decimal-leading-zero;
}

/*
Example of <li> element used in eg. menus
*/
ul {
	display: inline;
}
li {
	list-style-type: none;
}


The code above will not validate
This is because HTML5 do not support the attribute listed-item-type, which now also is introduced in CSS3. Validating listed-items can use the types "inherit", URL to the listed item, or default.

Code (CSS):
/*
Example of unnumbered list that validates
*/
ul {
	display: block;
}
li#method-one {
	list-style-type: inherit;
}
li#method-two {
	list-style: url(my_listed_item.png);
}


Transitional HTML5
Menus in XHTML 1.1 as well as HTML 4.01, can use the attribute inline. The <li> element will automatically show without the items in the list. If you don't format any thing, the CSS3 will use default ("disc", "circle", "square" in that order).

Code (CSS):
/*
Example of <li> used in validating horozontal menus
If the attribute "inline" are being used, the listed items in the <li> element will automatically be removed.
*/
ul {
	display: inline;
}

/*
Example of <li> tag used in vertical menus (that validate)
*/
ul {
	display: block;
}

li {
	list-style: none;
}


Conclusion
In the future, menus in HTML5 will use semantic navigation with the <nav> element. It will therefore be naturally to use URL, or simply default values, in the listed items.
 
Back to top 
 
IP Logged
 
Reply #7 - 11/28/12 at 21:35:27  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
CSS3 - list-style-type validates again!

In post #6 you could read that:

Administrator wrote on 11/13/12 at 02:50:49:
Many web-developers got a cold shower when they found out that their CSS3 (Cascading Style Sheet) no longer validated. Earlier unordered HTML lists (listed items) used the following types: "disc", "circle", "square", "decimal", "decimal-leading-zero", "lower-roman", "upper-roman", "lower-greek", "lower-alpha", "lower-latin", "upper-alpha", "upper-latin", "hebrew", "armenian", "georgian", "cjk-ideographic", "hiragana", "katakana", "hiragana-iroha", "katakana-iroha", "none", or "inherit".


Now, however, validates attribute selections (listed-item-type), also in CSS3 and HTML5. This proves that it was too early to draw the conclusion in #6:

Administrator wrote on 11/13/12 at 02:50:49:
In the future, menus in HTML5 will use semantic navigation with the <nav> element. It will therefore be naturally to use URL, or simply default values, in the listed items.



In other words, it was a little extra work for those of us who woke up to a cold shower in early November. I still think that #6 is useful info to create menus (otherwise I would have deleted it). Anyway, it should be really exciting to see the development of HTML5 and CSS3 in the future.
 
Back to top 
 
IP Logged
 
Reply #8 - 04/09/13 at 01:19:53  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
Responsive Web Design (RWD) and Adaptivt Web Design


Responsive Web Design (RWD) is a website that adapt the layout for various screens sizes - or in practice supports all screen resolutions. This means that the same HTML documents are used in everything from desktops, laptop, tablets, smartphones and mobile phones. The development of smart phones and apps has clearly influenced the development of RWD.


RWD uses CSS3 media queries, a development of the @media rule, to customize the layout. Some believe RWD should meet three requirements:

  1. Flexible grids
  2. Flexible images
  3. Media Queries


Sometimes a web developer does not want flexible images and grids, but only media queries. The positive effect of that is obviously that you can combine absolute and relative values in the CSS development. It is also easier to adapt existing web designs, so they in practice support all screen resolutions. This is often referred to as adaptive web design.

Code (CSS):
@media only screen and (min-width:640px) {
	div#vga {
		color: #000000;
		background: url('img/vga.png') repeat-y;
	}
}
@media only screen and (min-width:800px) {
	div#svga {
		background: url('img/svga.png') repeat-y;
	}
}
@media only screen and (min-width:1280px) {
	div#sxga {
		background: url('img/sxga.png') repeat-y;
	}
}
@media only screen and (min-width:1600px) {
	div#uxga {
		background: url('img/uxga.png') repeat-y;
	}
}
@media only screen and (min-width:1920px) {
	div#wuxga {
		background: url('img/wuxga.png') repeat-y;
	}
}
@media only screen and (min-width:1920px) {
	div#hd1080 {
		height:1080px;
		background: url('img/hd1080.png') repeat-y;
	}
}


Sources
« Last Edit: 04/09/13 at 21:41:37 by Administrator »  
Back to top 
 
IP Logged
 
Reply #9 - 04/22/13 at 04:06:53  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
Responsive Web Design (RWD): Customize the website for smartphones with 720px and 1080px resolution


How to adapt your website to smartphones, without using apps? The solution is to use CSS3 to the various media types or Media Queries. It can be more useful to adapt menus and content when the phone is used in portrait mode rather than landscape mode. In other words, it may be useful to distinguish between portrait and landscape mode on your smartphone. In the example below, I have used the Samsung Galaxy S3, which uses Android and it has screen resolution of 1,280 x 720 pixels (landscape x portrait). It is also an example for the upcoming Galaxy S4, which uses full HD resolution (1920px x 1080px).

Code (CSS):
/*
Target the Galaxy S3 (and S4) with media queries
*/
body {
	font-size:14px;
}
/*
Galaxy S3 (HD 720p)
*/
@media only screen and (max-device-width:720px) and (orientation:portrait) {
	body {
		font-size:20px;
	}
}
@media only screen and (max-device-width:1280px) and (orientation:landscape) {
  	body {
		font-size:16px;
	}
}
/*
Galaxy S4 (HD 1080p)
*/
@media only screen and (max-device-width:1080px) and (orientation:portrait) {
	body {
		font-size:18px;
	}
}
@media only screen and (max-device-width:1920px) and (orientation:landscape) {
  	body {
		font-size:14px;
	}
}
« Last Edit: 04/22/13 at 17:10:19 by Administrator »  
Back to top 
 
IP Logged
 
Reply #10 - 04/24/13 at 04:11:05  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
Use Responsive Web Design (RWD) in older browsers? The solution is to include Media Queries JavaScript


Internet Explorer 8 and older versions do not support CSS3 Media Queries. A solution is to forget those browsers. Another (and better) solution is to add following code to the head element in the document:

Code (HTML):
<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->


By adding the css3-mediaqueries.js JavaScript file, you will enable older browsers to support CSS3 Media Queries.  Roll Eyes
 
Back to top 
 
IP Logged
 
Reply #11 - 04/24/13 at 04:20:16  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
Example of using the new HTML5 elements


Administrator wrote on 02/23/10 at 02:47:38:
New tags (and some replacements)

New Tags Definitions
<article> Article
<aside> Content aside from the page content


In the post above I showed some examples of new tags in HTML5. Below I have made two simple examples that shows the main structure of the layout.

XHTML 1.1 with div containers

Code (HTML):
<!-- XHTML 1.1 main structure -->
<div id="header">
	<h1>London Gallery</h1>
	<div id="nav">
		<ul>
			<li><a href="../">Home</a></li>
			<li><a href="../Menu/">Menu</a></li>
		</ul>
	</div>
</div>
<div id="aside">
	<h2>More galleries</h2>
	<img src="img/London.jpg" width="200" height="200" alt="London Tower">
</div>
<div id="content">
	<div id="london-gallery">
		<!-- Content... -->
	</div>
</div>
<div id="footer">
	<p>&copy; 2013 Liavaag.org</p>
</div>


Below the same structure, but with HTML5 elements

Code (HTML):
<!-- HTML5 main structure -->
<header>
	<h1>London Gallery</h1>
	<nav>
		<ul>
			<li><a href="../">Home</a></li>
			<li><a href="../Menu/">Menu</a></li>
		</ul>
	</nav>
</header>
<aside>
	<h2>More galleries</h2>
	<img src="img/London.jpg" width="200" height="200" alt="London Tower">
</aside>
<section>
	<article id="london-gallery">
		<!-- Content... -->
	</article>
</section>
<footer>
	<p>&copy; 2013 Liavaag.org</p>
</footer>


Older browsers
Internet Explorer 8 and older browsers does not support the new HTML5 elements such as <header>, <aside>, <footer>, etc. Including the code below in the head element will enable IE8 and older browsers to acknowledge the new elements:

Code (HTML):
<!--[if lt IE 9]>
	<script src="http://www.liavaag.org/common/js/html5shiv.js"></script>
<![endif]-->
« Last Edit: 05/04/15 at 14:10:15 by Administrator »  
Back to top 
 
IP Logged
 
Reply #12 - 04/29/13 at 01:33:00  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
Administrator wrote on 04/24/13 at 04:20:16:
Example of using the new HTML5 elements

[...]

Older browsers
Internet Explorer 8 and older browsers does not support the new HTML5 elements such as <header>, <aside>, <footer>, etc. Including the code below in the head element will enable IE8 and older browsers to acknowledge the new elements:

Code (HTML):
<!--[if lt IE 9]>
	<script src="http://www.liavaag.org/common/js/html5shiv.js"></script>
<![endif]-->


HTML5 Shiv – The HTML5 Internet Explorer1 enabling script


HTML5 Shiv is a script that adds new HTML5 elements to obsolete browsers1. Download the script (see below) and include it before the <body> element, i.e. in the documents head. For best performance it can be smart to include the CSS first then this script. The source code is dual licensed under the MIT and GPL Version 2 licenses.


1Enables HTML5 elements for IE 6-9, Safari 4.x, iPhone 3.x, and Firefox 3.x.


Sources
« Last Edit: 04/29/13 at 05:03:13 by Administrator »  
Back to top 
 
IP Logged
 
Reply #13 - 04/29/13 at 06:07:07  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
Create header codes for obsolete Internet Explorer browsers


Programming responsive web design means that the web-developer often uses HTML5 elements and CSS3, which older browsers do not support (all the way up to IE8). But these obsolete browsers do fortunately support comment tags. These codes must be placed in the head of the HTML document. As the examples below shows, the codes works on style sheets as well as scripts.

Code (HTML):
<head>
<link rel="stylesheet" type="text/css" href="default.css" />


<!-- All versions IE -->
<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->


<!-- Everything except IE -->
<!--[if !IE]>
	<script src="not-ie.js"></script>
<![endif]-->


<!-- Only IE7 -->
<!--[if IE 7]>
	<script src="only-ie.js"></script>
<![endif]-->


<!-- IE8 and lower -->
<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="ie8-and-lower.css" />
<![endif]-->


<!-- IE 8 and higher -->
<!--[if gt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie8-and-higher.css" />
<![endif]-->
</head>
<body>
	<h1>Hello World!</h1>
</body>


About hacks

Code (CSS):
/* IE8 support */
#div {
	height:480px\0/;
}

/* IE7 and IE8 support */
#div {
	height:480px\9;
}

/* Underscore filter IE7 and later */
#div {
	min-height:480px;
	_height:480px;
}

/* IE7 support */
*+html #div {
	height:480px;
}

/* IE6 support */
* html #div {
	height:480px;
}

/* Hide from IE6 and lower */
#div {
	height/**/: 480px;
}

html > body #div {
	height:480px;
}
Huh

Hacks is not a good idea, because they are non-standard, and you can't predict how they are going to behave in future browsers. That’s why responsive web design is a far better idea.


Source
CSS-Tricks: How To Create an IE-Only Stylesheet
 
Back to top 
 
IP Logged
 
Reply #14 - 08/28/13 at 23:33:10  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
target="_blank" in HTML5?


Using target="_blank" to links in HTML has been the de facto method of opening links in new windows. With XHTML 1.0 Strict and XHTML 1.1, this method is deprecated, because this could confuse the user. Back button did not work, simply because the new tab or window did not retain the browser history. This view of target="_blank" has now changed, however. W3C has currently allowed the use of target="_blank" in HTML5...


Further reading
W3C - A valid browsing context name or keyword
 
Back to top 
 
IP Logged
 
Pages: 1 2 3 
Send Topic Print
‹ No Topic | Next Topic ›
« Home ‹ Board Top of this page