These forums are currently read-only due to receiving more spam than actual discussion. Sorry.

It is currently Sat Dec 02, 2017 4:13 pm Advanced search

I dont even begin to understand

If you are stuck or have questions regarding HTML or other Web technologies, ask your questions here. No question too dumb!
Topic locked

I dont even begin to understand

Postby TwinNovaFire » Tue Nov 13, 2012 12:48 pm

OKE so my teacher is not the brightest one in the world and he leaves us to figure stuff out on our own
now we were supposed to make an application or smth but thats besides the point what my questiong is is:
What is that <aside> element supposed to do?
He told us it was like a segment next to all the other stuff on that page but it just seems to be above everything.
AKA: wtf i dont even know.....

Code: Select all
<html>
</head>
    <body>
        <header>
            <aside>
                <ul>
                    <li><a href="http://www.gamespot.com/">Gamespot</a>
                    <li><a href="http://www.insidegamer.nl/">Insidegamer</a>
                 
                </ul>
            </aside>
            <h1>Games</h1>
            <nav>
                <ul>
                    <li><a href="/android/index.html">Home</a></li>
                    <li><a href="/android/html/nieuws.html">News</a></li>
                    <li><a href="/android/html/reviews.html">Reviews</a></li>
                    <li><a href="/android/html/releases.html">Future Releases</a></li>
                    <p>
                    <li><a href="/android/html/mmorpg.html">MMORPG Section</a></li>
                </p>
                </ul>
            </nav>
        </header>
        <section>
            <h1>  </h1>
            <p> </p>
        </section>
    </body>
</html>


here is the css just incase that is needed

Code: Select all
body {
    background-color: grey;
    color: white;
    font-family: Helvetica;
    margin: 0;
}
p {
    margin: 0;
    padding: 0;
    border-bottom: 1px soid #666;
    color: #222;
    display: block;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0;
    text-decoration: none;
}
p#review {
    margin: 0;
    padding: 0;
    border-bottom: 1px soid #666;
    color: #222;
    display: block;
    font-size: 15px;
    font-weight: bold;
    padding: 10px 0;
    text-decoration: none;
}

p#news {
    margin: 0;
    padding: 0;
    border-bottom: 1px soid #666;
    color: #222;
    display: block;
    font-size: 10px;
    font-weight: bold;
    padding: 10px 0;
    text-decoration: none;
}



header h1 {
    margin: 0;
    padding: 0;
    background-color: #ccc;
    border-bottom: 1px soid #666;
    color: #222;
    display: block;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0;
    text-decoration: none;

}

header ul {
    list-style: noen;
    margin: 10px;
    padding: 0;
}
header ul li{
    list-style:none;
}
header ul li a {
    background-color: #ffffff;
    border: 1px solid #999999;
    color: #222222;
    display: block;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: -1px;
    padding: 12px 10px;
    text-decoration: none;
}

header h1 {
    text-shadow: 0px 1px 1px #fff;
    text-align: center;
}


srry if its a stupid question
TwinNovaFire
<h6>
 
Posts: 2
Joined: Tue Nov 13, 2012 12:39 pm

Re: I dont even begin to understand

Postby zcorpan » Tue Nov 13, 2012 3:50 pm

Hi, welcome to the forums!

The stupid questions are the ones that don't get asked. :-)

What is that <aside> element supposed to do?


Let's check with the spec.
http://www.whatwg.org/specs/web-apps/cu ... de-element

Also see http://html5doctor.com/aside-revisited/

HTH
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden

Re: I dont even begin to understand

Postby JAB Creations » Tue Nov 13, 2012 7:09 pm

For good semantic practices you will want to restrict your h1 element to be used once and therefore not as a child to any aside element. Additionally I can't think of any context in which you would put an aside element inside of a header element. It's best to think of how the elements relate to a book or newspaper, once you understand those then it should make more sense. :)
User avatar
JAB Creations
<aside>
 
Posts: 566
Joined: Tue Mar 13, 2007 4:48 am
Location: Sarasota Florida, USA

Re: I dont even begin to understand

Postby TwinNovaFire » Tue Nov 13, 2012 7:16 pm

WOOPS my bad srry posted the wrong code this is the right one.


css code
Code: Select all
root {
    display: block;
}

body {
    background-color: grey;
    color: white;
    text-align: center;
    margin: 0;
    padding: 10px;
}

footer{
   
   
}

header h1 {
   
    color: white;
    padding: 10px 0px;
    text-align: center;
    border: 1px solid black;
    text-shadow: 0px 1px 1px #fff;
    background: -moz-linear-gradient(top,  #ccc,  #999);
}

header ul {
    list-style: none;
    margin: 10px;
    padding: 0;
   
}

header ul li {
    list-style: none;
   
}

header ul li a {
    background: -moz-linear-gradient(top,  #ccc,  #999);
    border: 1px solid black;
    color: white;
    display: block;
    margin-bottom: -1px;
    padding: 12px 10px;
    text-align: center;
}

header ul li:first-child a {
    border-radius:8px 8px 0 0;
}   

header ul li:last-child a {
    border-radius: 0 0 8px 8px;
   
}

section {
    color: black;
}

aside {
    color: black;
}

#inladen {
    border-radius: 10px;
    background-color: orange;
    opacity:0.8;
    color:white;
    font-size: 18px;
    font-weight: bold;
    height: 80px;
    width: 200px;
    padding-top: 50px;
    padding-left: 10px;
    position: absolute;
    top: 140px;
    left: 55px;
    text-align: center;
    }


html code
Code: Select all
<!DOCTYPE html>

<html>
    <head>
        <title>Toets</title>
       
        <link rel="stylesheet" href="/toets/css/toets.css" type="text/css"/>
       
        <script type="text/javascript" src="/toets/js/jquery.js"></script>
        <script type="text/javascript" src="/toets/js/toets.js"></script>
        <meta name="keywords" content="xxxxxx"/>
        <meta name="author" content="xxxxxx"/>
        <meta name="description" content="xxxxx"/>
        <meta name="robot" content="xxxx"/>
        <meta name="viewport" content="width=device-width, initial-scale=2" />

    </head>
   
     <body>
        <header>
            <h1>Toets oefenen</h1>
           
            <div id= "utility">
                <ul>
                    <li><a href="/toets/html/intro.html">Intro</a></li>
                    <li><a href="/toets/html/inloggen.html">Inloggen</a></li>
                </ul>
            </div>
               
            <nav>
                <ul>
                    <li><a href="/toets/index.html" class="item1">Home</a></li>
                    <li><a href="/toets/html/pagina1.html" class="item2">Pagina 1</a></li>
                    <li><a href="/toets/html/pagina2.html" class="item3">Pagina 2</a></li>
               </ul>
            </nav>
           
        </header>
         
         <section id="content">
             <h2>intro</h2>
             <p>
                 Toets oefenen toets oefenen
             </p>
         </section>

         <aside>
             <img alt="logo" src="........."/>
             <p>Korte beschrijving van de app</p>
         </aside>
    </body>
</html>


javascript
Code: Select all
$(document).ready(function(){
    $('body').append('<div id="inladen">Inladen...</div>');
    var url=document.URL.split('html')[1];           
    if (laadIndex()) {
        $('nav').fadeOut(1000);
        $('#utility').fadeOut(1000)
    }     
               
    $('#inladen').delay(700).fadeOut(1000);
});

function laadIndex (url) {
       if (url == undefined) {
           return false;
       } else {
           return true;
       }
    }
TwinNovaFire
<h6>
 
Posts: 2
Joined: Tue Nov 13, 2012 12:39 pm

Re: I dont even begin to understand

Postby soignus » Tue Nov 13, 2012 8:17 pm

Hmm i think i have got something that might help you TwinNovaFire

Code: Select all
CSS

------------------------------------
img{
    width: 100%;
}




body {       
    width: 95%;
    background-color: rgb(222,125,22);
}


header ul {
    list-style: none;
    margin: 0;
    padding: 0;   

}
section#filmlijst ul li {
    border-style:solid; /*randstijl is aaneengesloten */
    border-width: 1px; /*breedte van de rand staat op 1 pixel*/
    border-color: cyan; /*kleur van de rand is blauw */
    width: 180px;
    display: block;
    border-radius: 8px;
    margin-bottom: 10px;
}

section#filmlijst ul li:nth-child(odd){
    color: blue;
}

section#filmlijst ul li:nth-child(even){
    color: green;
}

#q {
    float: right;
}

header h1 {
    background: url("/films/img/films.png") no-repeat scroll left 10px transparent;
    text-indent: -9999px;
    margin: -10px auto -175px;
    height: 300px;
}

header ul li:first-child a {
    border-radius: 12px 12px 0 0;
}

header ul li:last-child a {
    border-radius: 0 0  12px 12px;
}



header ul li a {
    background-color: white;
    border: 1px solid #999999;
    color: black;
    display: block;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: -1px;
    padding: 12px 10px;
    text-decoration: none;

}

#inladen {
    border-radius: 10px;
    background-color: white;
    opacity: 0.9;
    color: orange;
    font-size: 18px;
    font-weight: bold;
    height: 80px;
    width: 200px;
    padding-top: 20px;
    position: absolute;
    top: 200px;
    left: 60px;
    text-align: center;
}


INDEX
-----------------------------------------

<html>
    <head>
        <title>Films</title>
        <meta charset="UTF-8">
        <meta name="description" content="Restaurant,Pinokio">
        <meta name="author" content="105826">
        <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0" >
        <meta name="robots" content="index, follow">
        <meta name="robots" content="noarchive">

        <script src="js/jquery-1.8.2.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>   
     
        <link type="text/css" rel="stylesheet" href="css/style.css">
        <link type="text/css" rel="stylesheet" href="css/font.css">


    </head>
    <body>
        <div id="container">
           
            <header>
                <h1>films</h1>                           
                <nav id="n">
                    <ul>
                        <li><a href="index.html" id="active">home</a></li>
                        <li><a href="paginas/films_gezien.html">films gezien</a></li>
                        <li><a href="paginas/menukaart.html">een titel invoeren</a></li>
                        <li><a href="paginas/specialiteiten.html">top 10 films</a></li>
                   
                    </ul>
                </nav>
            </header>

    </body>
</html>


PAGINA FILMS_GEZIEN
----------------------------------------



<html>
    <head>
        <title>Films</title>
        <meta charset="UTF-8">
        <meta name="description" content="Restaurant,Pinokio">
        <meta name="author" content="105826">
        <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0" >
        <meta name="robots" content="index, follow">
        <meta name="robots" content="noarchive">

        <script src="js/jquery-1.8.2.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>   

        <link type="text/css" rel="stylesheet" href="../css/style.css">
        <link type="text/css" rel="stylesheet" href="../css/font.css">


    </head>
    <body>
        <div id="container">

            <section id="filmlijst">

                <ul>
                    <p id="q">films gezien</p>
                    <li>Shawshank Redemption, The (1994)</li>
                    <li>Godfather, The (1972)</li>
                    <li>Green Mile, The (1999)</li>
                    <li>Godfather: Part II, The (1974)</li>
                    <li>Pulp Fiction (1994)</li>
                    <li>C'era una Volta il West (1968)</li>
                </ul>

            </section>
        </div>

    </body>
</html>
soignus
<h6>
 
Posts: 1
Joined: Tue Nov 13, 2012 8:12 pm

Re: I dont even begin to understand

Postby JAB Creations » Wed Nov 14, 2012 3:07 am

1.) You're using a non-existent mime "text/javascript" which isn't registered in any standard, the correct mime for JavaScript is "application/javascript". Of course because Internet Explorer sucks IE8 and older should be served as "text/javascript" and also all version 8.x of Opera though not older or newer versions for some reason. If you decide to code this correctly ensure that your server-side scripting is decided upon DOM object detection to determine the type and not the user agent. If you do not serve the non-existent mime to IE8&- or Opera 8.x those browsers will fail to run JavaScript. Because those browsers will disappear over the next few years you should get used to serving the correct mime however.

2.) Stay away from frameworks especially jQuery as they are not only massively bloated they instantly veer you away from simply using DOM object detection so you'll end up with exceptionally poor coding practices and it uses the proprietary Microsoft jScript innerHTML method which does not correctly register (X)HTML elements in the DOM making working with the DOM a hit-or-miss (mostly miss) affair.

3.) Your code looks a little better though a h1 would be better placed semantically speaking either directly after or directly before the header element as that should be representative of the page as a whole whereas placing it within the header element creates a direct association with that header element directly.

Code: Select all
<h1>Header One - Whole Page Header</h1>
<header>
<!-- This header would define the context of the entire page in correlation to the h1 element. -->
</header>

<h2>Section Header</h2>
<section>
</section>

<h2>Section Header</h2>
<section>
</section>


Notice that I have two sections and two h2 elements which could be used in a blog index page for example where you have a selection of the latest X number of blog entries. In that scenario the h1 element could simply be 'blog' which could be interpreted as 'blog index' essentially. Placement of elements and which elements you use can drastically alter how content is perceived so having an in-depth understanding of all the (X)HTML5 elements and what roles they are intended for will benefit you greatly when coding towards your goals.
User avatar
JAB Creations
<aside>
 
Posts: 566
Joined: Tue Mar 13, 2007 4:48 am
Location: Sarasota Florida, USA

Re: I dont even begin to understand

Postby zcorpan » Wed Nov 14, 2012 10:36 am

JAB Creations wrote:1.) You're using a non-existent mime "text/javascript" which isn't registered
Yes it is.

JAB Creations wrote: in any standard, the correct mime for JavaScript is "application/javascript". Of course because Internet Explorer sucks IE8 and older should be served as "text/javascript" and also all version 8.x of Opera though not older or newer versions for some reason.

Ah, so a good way to make your content not work in older browsers.

Changing type="text/javascript" to type="application/javascript" is pointless.

JAB Creations wrote:2.) Stay away from frameworks especially jQuery as they are not only massively bloated they instantly veer you away from simply using DOM object detection so you'll end up with exceptionally poor coding practices and it uses the proprietary Microsoft jScript innerHTML method which does not correctly register (X)HTML elements in the DOM making working with the DOM a hit-or-miss (mostly miss) affair.

innerHTML is standardized these days.
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden

Re: I dont even begin to understand

Postby JAB Creations » Thu Nov 15, 2012 5:57 am

Changing type="text/javascript" to type="application/javascript" is pointless.


So standards are pointless?

zcorpan wrote:Yes it is.


The "text/javascript" mime is obsolete...
http://www.apps.ietf.org/rfc/rfc4329.html#sec-7.1

zcorpan wrote:innerHTML is standardized these days.


Then it does not belong in whatever standard it was grandfathered in. It does not work correctly with the DOM and it should be avoided in absolute and real standard code should be used instead such as appendChild, insertBefore, importNode, etc.

Simply being part of a group of people who help develop standards isn't enough, if a person doesn't actually use what they are attempting to standardize then they will fail to fully comprehend what they are talking about; in example I had Anne tell me to use setTimeout as a hack to get around the lack of the finishPropagation method, that's pretty hardcore fail when someone high up in a standards body tells you to use a hack.
User avatar
JAB Creations
<aside>
 
Posts: 566
Joined: Tue Mar 13, 2007 4:48 am
Location: Sarasota Florida, USA

Re: I dont even begin to understand

Postby zcorpan » Thu Nov 15, 2012 7:01 am

I think we're getting a bit off-topic now, but anyway...

JAB Creations wrote:So standards are pointless?

That doesn't follow.

JAB Creations wrote:The "text/javascript" mime is obsolete...
http://www.apps.ietf.org/rfc/rfc4329.html#sec-7.1

You said it wasn't registered, which is false.

IMHO, the standard shouldn't have obsoleted it, instead it should have paved the cowpath and made text/javascript the appropriate type.

JAB Creations wrote:Then it does not belong in whatever standard it was grandfathered in.
It's in http://domparsing.spec.whatwg.org/ . Since innerHTML is about parsing and serializing, it seems to fit the bill.

JAB Creations wrote:It does not work correctly with the DOM

What do you mean?

JAB Creations wrote:and it should be avoided in absolute and real standard code should be used instead such as appendChild, insertBefore, importNode, etc.

Why are these methods "real standard code"?

JAB Creations wrote:Simply being part of a group of people who help develop standards isn't enough, if a person doesn't actually use what they are attempting to standardize then they will fail to fully comprehend what they are talking about; in example I had Anne tell me to use setTimeout as a hack to get around the lack of the finishPropagation method, that's pretty hardcore fail when someone high up in a standards body tells you to use a hack.

I don't know what this is about.
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden

Re: I dont even begin to understand

Postby JAB Creations » Thu Nov 15, 2012 9:13 am

The innerHTML method does not properly register nodes in the DOM so it's a giant maybe if you try to use JavaScript to interact with a node "registered" with the DOM afterwards.

There is also the DOM parser and XML serialization that can be used...

Code: Select all
new DOMParser().parseFromString(myStringInTextarea,'application/xml');


Code: Select all
new XMLSerializer().serializeToString(document.getElementsByTagName('body')[0];


Unlike innerHTML they're reliable, I use them on my editors on my site to instantly switch between rich editing and editing XHTML in a textarea.

My main concern is making sure people understand their better options so when they use code it will actually do what they think it will do instead of merely appear to do what they think they want it to do, that way people can continue to build upon what they have and continue to improve not only what they're working on though also their own skills. Otherwise people get stuck in the endless loop of maintenance of poorly construed code.
User avatar
JAB Creations
<aside>
 
Posts: 566
Joined: Tue Mar 13, 2007 4:48 am
Location: Sarasota Florida, USA

Re: I dont even begin to understand

Postby zcorpan » Thu Nov 15, 2012 10:36 am

JAB Creations wrote:The innerHTML method does not properly register nodes in the DOM so it's a giant maybe if you try to use JavaScript to interact with a node "registered" with the DOM afterwards.
What do you mean by registered?

JAB Creations wrote:There is also the DOM parser and XML serialization that can be used...

Code: Select all
new DOMParser().parseFromString(myStringInTextarea,'application/xml');


Code: Select all
new XMLSerializer().serializeToString(document.getElementsByTagName('body')[0];


Unlike innerHTML they're reliable,
Why are they more reliable than innerHTML? AFAICT DOMParser requires the input to be a whole document and has non-intuitive error reporting. It's also more verbose. Another difference is that scripts execute when they are inserted to the document with DOMParser but don't with innerHTML, so what you want there depends on the use case, I guess.
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden

Re: I dont even begin to understand

Postby JAB Creations » Thu Nov 15, 2012 6:20 pm

That's why I use application/xhtml+xml, because I blatantly know if it's working or not. I had used innerHTML in Version 2.8 of my site however I could never use JavaScript to interact with elements loaded via AJAX such as aiding accessibility by moving the focus() to AJAX/innerHTML content. By using real standards based methods such as importNode the XML is correctly registered in the DOM. I'm not sure exactly what innerHTML is not doing though it's vividly clear it's not doing what it should nor is it doing what people think it's doing. I actually go to great lengths when I program to make everything works as it should and not simply appear to look like it works like it should. I do not stand by opinions strongly unless I've wasted hours at some point trying to make something work that never would thus I try to help people do it right the first time so they don't waste the time that I did.
User avatar
JAB Creations
<aside>
 
Posts: 566
Joined: Tue Mar 13, 2007 4:48 am
Location: Sarasota Florida, USA
Topic locked

Return to Help & Advice

Who is online

Users browsing this forum: No registered users and 0 guests

 

Who is online

In total there are 0 users online :: 0 registered, 0 hidden and 0 guests (based on users active over the past 5 minutes)
Most users ever online was 129 on Thu Feb 11, 2010 2:54 am

Users browsing this forum: No registered users and 0 guests

Designed by RocketTheme

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group