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 1491052 times)
Reply #16 - 03/23/14 at 16:15:14  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
@font-face rule – CSS3 web fonts

The font-face rule allows web designers to render any font you will, regardless it is installed on the user's computer or not. The fonts are defined within CSS3, and will be downloaded to the user. Web designers must make sure that the font is licensed for web use, before it is uploaded to the server. For Internet Explorer, EOT (Embedded OpenType) files is recommended. For the rest of the browsers you can either use OTF (OpenType) or TTF (TrueType). There are also other formats available, like SVG (Scalable Vector Graphics) and WOFF (Web Open Font Format). The latter is supported in all modern browsers (Chrome 5, Firefox 3.6, Internet Explorer 9, Opera 11.1, and Safari 5.1).

Code (CSS):
/*
Basic @font-face rule
*/
@font-face {
	font-family: myFont;
	src: url('my_font.eot');
	src: url('my_font.otf')
	src: url('my_font.ttf')

}
h1 {
	font-family:myFont;
}


The code above will do the job in most cases, but there are also more reliable techniques. The web designer can extend the rule with an indicator of the font file type (format). Another technique is to add local in front of the font type. The browser will then check for a local copy of the font in case the user already has it.

Code (CSS):
/*
Extended @font-face rule
*/
@font-face {
	font-family: myFont;
	src: local('My Font'), local('My-Font'), url('my_font.eot') format('embedded-opentype');
	src: local('My Font'), local('My-Font'), url('my_font.otf') format('opentype');
	src: local('My Font'), local('My-Font'), url('my_font.ttf') format('truetype');
	src: local('My Font'), local('My-Font'), url('my_font.svg#myfont') format('svg');
	src: local('My Font'), local('My-Font'), url('my_font.woff') format('woff');
}
h1 {
	font-family:myFont;
}
« Last Edit: 03/30/14 at 17:33:32 by Administrator »  
Back to top 
 
IP Logged
 
Reply #15 - 11/26/13 at 02:51:00  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
Google Maps in HTML5


Google Maps API version 2 is no longer available. The code must now be made in API v3. This has not very much to do with HTML5, but if you want a Google map on your site, you must know use API JavaScript version 3, so I show it how anyway.

Code (HTML):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>API v2</title>

<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=...YOUR API v2 key"></script>
<style type="text/css">
	function initialize() {
		var map;
		if (GBrowserIsCompatible()) {
			var mapOptions = {
			googleBarOptions : {
			style : "new"
			}
		}
          	map = new GMap2(document.getElementById("map-canvas"), mapOptions);
          	map.setCenter(new GLatLng(59.921290,10.753051), 16);
          	map.setMapType(G_NORMAL_MAP);
          	map.setUIToDefault();
          	map.openInfoWindow(map.getCenter(), document.createTextNode("Info om Dansens Hus"));
		}
	}
</style>
</head>
<body onload="initialize()" onunload="GUnload()">
	<div id="map-canvas"></div>
</body>
</html>


Code (HTML):
<!DOCTYPE html>
<html lang="en">
<head>
<title>API v3</title>
<!-- Google Maps API v3 does not require an API key -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<style type="text/css">
	function initialize() {
		var myLatlng = new google.maps.LatLng(59.921290, 10.753051);
 		var mapOptions = {
    		zoom: 16,
    		center: myLatlng
  	}
  	var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  	var marker = new google.maps.Marker({
	position: myLatlng,
	map: map,
	title: 'Dansens Hus'
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</style>
</head>
<body>
	<div id="map-canvas"></div>
</body>
</html>
« Last Edit: 02/11/14 at 01:17:20 by Administrator »  
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: 291
 *****
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
 
Reply #13 - 04/29/13 at 06:07:07  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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 #12 - 04/29/13 at 01:33:00  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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 #11 - 04/24/13 at 04:20:16  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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 #10 - 04/24/13 at 04:11:05  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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 #9 - 04/22/13 at 04:06:53  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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 #8 - 04/09/13 at 01:19:53  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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 #7 - 11/28/12 at 21:35:27  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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 #6 - 11/13/12 at 02:50:49  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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 #5 - 10/21/12 at 03:39:33  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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 #4 - 03/15/11 at 05:41:03  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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 #3 - 01/28/11 at 19:40:13  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 291
 *****
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 | 1040 )
HTML5-Logo.png
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: 291
 *****
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
 
Pages: 1 2 3 
Send Topic Print
‹ No Topic | Next Topic ›
« Home ‹ Board Top of this page