Right markup for HTML5 website? - html

I developing my new website in HTML5/CSS3.
When converting my PSD files to HTML5 / CSS3 I wonder what the correct markup for an HTML5 website.
Below is a simple wireframe of my website, as you can see I want the website to make full width, at least in the different areas.
This is the layout:
As you can see here, I want to have some different section on my homepage for the information.
And I came up with this markup:
Because when I copy all the list no longer be seen, I have the
content, text and images in this code omitted. Where an image or a
text would face with a comment below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<!-- Meta Tags -->
<!-- Stylesheets -->
<link href="css/style.css" rel="stylesheet">
<link href="css/960.css" rel="stylesheet">
<!-- Icons -->
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-retina.png">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Start container website -->
<header id="header">
<div class="container_12">
<div class="grid_12">
<!-- // Here will be position the logo with a link \\ -->
<nav id="primary-navwrapper">
<!-- // Here will be an unordered list with menu items \\ -->
</nav>
</div><!-- End .grid_12 -->
<div class="clear"></div><!-- End .clear -->
</div><!-- End .container_12 -->
</header><!-- End header -->
<section id="hero">
<div class="sliderbox">
<!-- // An list of image for a slider \\ -->
</div><!-- End .sliderbox -->
</section><!-- End section#hero -->
<section id="introduce">
<article class="container_12">
<!-- // 3 colomn with a h-tag and some text inside a paragraph \\ -->
<!-- // 3 colomn with a h-tag and some text inside a paragraph \\ -->
<!-- // 3 colomn with a h-tag and some text inside a paragraph \\ -->
</article><!-- End article.container_12 -->
<article class="container_12">
<div class="grid_12">
<!-- // A image tag \\ -->
</div><!-- End .grid_12 -->
</article><!-- End article.container_12 -->
</section><!-- End section#introduce -->
<hr class="dark-grey"> <!-- Divider for the section -->
<section id="work" class="alt">
<article class="container_12">
<!-- // a h-tag and some text inside a paragraph + 3 column portfolio items \\ -->
</article><!-- End article.container_12 -->
</section><!-- End section#work.alt -->
<hr> <!-- Divider for the section -->
<section id="blog" class="even">
<article class="container_12">
<aside class="grid_4">
<!-- Sidebar with some text -->
</aside><!-- End aside.grid_4 -->
<ul class="recentbox">
<!-- List of 2 latest blog items -->
</ul><!-- End ul.recentbox -->
</article><!-- End article.container_12 -->
<article class="container_12">
<div class="grid_12">
<!-- Contact banner -->
</div><!-- End .grid_12 -->
</article><!-- End article.container_12 -->
</section><!-- End section#blog.even -->
<footer id="footer">
<!-- Footer markup here -->
</footer><!-- End footer -->
</body>
</html>
Some extra information. As you can see I start with the <header> -tag for the header, after that I set some areas up with the <section> -tag inside that I will at the <article> -tag with a class of <article class="container_12"> to be able to use the grid 960. Inside that <article> -tag I will be set text, image etc.
Good to know is that I tag the article in some sections often use, I do this because for several articles in a specific section to distinguish. With Articles do have a connection with each other but are different in one article to post.
I love to hear your opinions regarding my markup so far and how you would tackle.
Thank you.

You're mark up is totally acceptable. I would suggest maybe not going so heavy with the id tags, but instead going for a more OO approach to come of your CSS. For information go here: http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
Otherwise your mark up is fine.

Related

Laravel 5: Class 'HTML' not found even though package has been installed

I know that this isn't an embedded package any more. In my composer.json I have:
"require": {
...stuff...
"illuminate/html": "5.*"
}, etc.
In app.php I have:
'providers' => [
...stuff...
'Illuminate\Html\HtmlServiceProvider',
...more stuff...
],
'aliases' => [
...stuff...
'Html' => 'Illuminate\Html\HtmlFacade'
], etc.
I have run composer update, so why is it not recognising when I use HTML::script()? This is the Blade template that is throwing the error:
<!DOCTYPE HTML>
<html lang="en">
<!-- USER LOGIN SECURITY -->
<!-- require('redis-session.php');
RedisSession::start();
#if (!isset($_SESSION['HTTP_SHIB_EP_EMAILADDRESS']))
header('Location: https://resviz.ncl.ac.uk/signin?redirect=https://resviz.ncl.ac.uk/wos/index.php');
die();
#endif -->
<head>
<title>Academic Intelligence</title>
<!-- LINKS -->
<!-- local css file -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- Corporate visual identity -->
<link href="//resviz.ncl.ac.uk/static/style/cvi.css" media="screen" rel="stylesheet" type="text/css" />
<!-- bootstrap css -->
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/readable/bootstrap.min.css" rel="stylesheet">
<!-- fonts -->
<link href='https://fonts.googleapis.com/css?family=Raleway:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
<!-- META -->
<meta charset="UTF-8"/>
<!-- ensure proper rendering and touch zooming in mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- BREADCRUMBS -->
<div class="sg-orientation">
Skip to Content
<span class="sg-breadcrumbs">
Newcastle University >>
Research Visualisation >>
<strong href="#">Academic Intelligence</strong>
</span>
</div>
<!-- TITLE BAR -->
<div class="sg-titlebar">
<h1><a title="Newcastle University Homepage" accesskey="1" href="http://www.ncl.ac.uk/"/><span title="Newcastle University">Newcastle University</span></a></h1>
<h2>Academic Intelligence</h2>
</div>
<div class="sg-navigation"> </div>
<div class="sg-content">
<!-- NAVIGATION BAR -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span></li>
<li>About</li>
</ul>
</div> <!-- navbar-collapse -->
</div> <!-- container -->
</nav> <!-- navbar -->
<!-- main content -->
<section class="container">
{{-- unique section to other pages --}}
#yield('content')
</section> <!-- main content; container -->
</div> <!-- sg-content -->
<!-- FOOTER -->
<div class="sg-clear"> </div>
<div class="sg-footer">
<p>Research & Enterprise Services<br/>Newcastle University, Newcastle Upon Tyne,<br/>NE1 7RU, United Kingdom<br/>Email Webmaster<br/><br/>© {{ date('Y') }} Newcastle University</p>
</div>
<!-- SCRIPTS -->
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- local script -->
{{ HTML::script('js/script.js') }}
<!-- bootstrap js -->
{{ HTML::script('//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js')}}
<!-- angularJS -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<!-- check browser version, if outdates, prompt for update -->
<script src="//browser-update.org/update.js"></script>
</body>
</html>
I am moving this existing web application into Laravel and so am trying to implement the various Blade components. In this case changing what was <script src="script.js"></script> to {{ HTML::script('js/script.js') }}. I cannot understand why the HTML Class is not being recognised though...
You can use the {!! HTML::script('whatever') !!}.
In Laravel 5 or 5.1, mostly you can use {!! codes !!} instead of {{ codes }}.

jQuery Mobile basics

I am trying to learn how to program with jQuery Mobile and I cannot understand why this code doesn't work:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css">
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="First">
<div data-role="header">
<h1>First</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>First Page</p>
<p>View page called Second</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="Second">
<div data-role="header">
<h1>Second</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>Second Page</p>
<p>Back to First</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
Thank you very much for helping!
vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
The markup you have posted works fine using JSFiddle.
The only difference between the example you have posted and the one I have created on JSFiddle (apart from the missing closing HTML tag) is the path references to the external libraries:
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
Replace your script and stylesheet references with the block above and see if it works. These libraries are hosted on Google's Content Delivery Network (CDN). If this works, the paths to your local versions of these files are wrong and you will need to correct them.
Here is a page explaining about file paths:
http://css-tricks.com/quick-reminder-about-file-paths/

Grid issue with Bootstrap

I'm trying to build a simple page using Bootstrap. The problem I have now is related to the grid system.
I needed a main div contain two divs. So I created a main div with class of row-fluid. The inside two divs were given classes of soan4 and span8, respectively. The problem I have now is that the two divs are not shown properly. Please take a look at the end result: http://i61.tinypic.com/2rgneci.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sticky footer · Twitter Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- CSS -->
<style type="text/css">
.border{
border: 2px solid;
}
</style>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="row-fluid">
<!-- sidebar start -->
<div class="sidebar border span4" >
1 </div>
<!-- sidebar end -->
<!-- content start -->
<div class="blogBody border span8">
2 </div>
<!-- content end -->
</div><!-- main div end -->
</body>
</html>
Since bootstrap 3 the syntax changed:
span does't exist now it's col-width_wanted-number_of_columns
so for you something like this :
<div class="row-fluid">
<div class="sidebar border col-xs-4" >
1
</div> <!-- sidebar end -->
<!-- content start -->
<div class="blogBody border col-xs-8">
2
</div> <!-- content end -->
</div><!-- main dev end -->
http://jsfiddle.net/z22oxbap/
For more ressource look here : http://getbootstrap.com/css/#grid
EDIT:
-xs- is for extra small device (<768px) width
-sm- is for small device between (≥768px) and (<992px) width
-md- is for desktop device between (≥992px) and (<1200px) width
-lg- is for large device more than (≥1200px) width

JQuery mobile multi-page

When run the following code, firefox 17.0.5 gives an "error loading message", when I want to open the car page. But it works properly in IE8.
Then I found an example here
http://jquerymobile.com/demos/1.0/docs/pages/multipage-template.html
I opened that website with firefox 17.0.5, works. Then I viewed the source code, almost the same structure as mine. But when I download the html and run it, neither IE8 nor FF works. What's wrong here? I m linked to jQuery moible from another project, know nothing about web development. Please help. :(
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="menu">
<div data-role="header">
<h1>Menu</h1>
</div><!-- /header -->
<div data-role="content">
<p>What vehicles do you like?</p>
<p>Cars</p>
<p>Trains</p>
<p>Planes</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /header -->
</div><!-- /page -->
<!-- / Page 2 -->
<div data-role="page" id="one">
<div data-role="header">
<h1>Cars</h1>
</div><!-- /header -->
<div data-role="content">
<p>Content about cars</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Cars</h4>
</div><!-- /header -->
</div><!-- /page -->
</body>
</html>
I had the same problem too, And I found that the problem is using the protocol file://, You can’t work with jquerymobile with the protocol file:// it has to be a web address. After moving my project to my local server, with protocol http:// it worked immediately.
Source : http://doeswhat.com/2011/03/08/jquery-mobile-error-loading-page/
EDIT:
In your case, avoiding spaces in URL address solves your problem

Compiling html templates to complete website

I'm used to using ASP.NET and visual studio to develop websites. I'm trying to develop a plain .html website in a similar matter. What I mean is use master pages etc so there is code reuse and maybe deploy these template files to a group of .html files.
For example
head.html
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.ui.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
header.html
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
footer.html
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
layout.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
#include(head.html)
</script>
</head>
<body>
<div data-role="page">
#include(header.html)
#include_body()
#include(footer.html)
</div><!-- /page -->
</body>
</html>
index.html
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
and combine all of these into a single output file....
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Does anything like this exist? I'm not familiar with ruby or anything...
Server-side includes (SSI) may meet your needs. With some basic server requirements met, you can do, for example:
<!--#include virtual="includes/my_file.html" -->
You could use a little PHP to do this using includes.
Header, footer etc could be created as new .php files where you place everything you want to be displayed in that section in.
Then, in say your index.php file you do something like
<?php
include ('header.php');
?>
<html>
<head>
</head>
<body>
</body>
<?php
include ('footer.php');
?>
Everything inside the header and footer PHP files will be included.