I have a question which I searched but could not find an answer yet.
I need to embed content of an html page within a html page. I basically want iframe functionality without using a separate page but just the content itself.
I also need mother style sheet won't effect child style sheet in the same page.
so it will be like below and I need the magic_tag
<body style=1> mother page
<magic_tag><body style=2> child page content </body></magic_tag>
</body>
I wonder if this is possible or do I want something impossible
You're approaching this the wrong way, try this ->
Don't give anything in the child "page" the same class or id as the parent "page"
http://jsfiddle.net/8pFMe/6/
<body>
<div class="container">
<div class="nav">
<ul>
<li>Home </li>
<li> Link </li>
<li> Link2 </li>
<li> Link3 </li>
</ul>
</div>
<div class="wrapper">
<div class="sidebar">
<ul>
<li>Sidebar Stuff</li>
<li>Link</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</div>
<div class="body">
<div class="second-page">
<div class="second-container">
<div class="second-nav">
<ul>
<li>Home</li>
<li>Link</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</div>
<div class="second-wrapper">
<div class="second-sidebar">
<ul>
<li>Sidebar Stuff</li>
<li>Link</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</div>
</div>
<div class="second-body">
<p> This looks similar to an iframe, but it's not an iframe.
</div>
</div>
</div>
</div>
</div>
</div>
</body>
css:
.container{
width:500px;
margin:0 auto;
}
.nav li, .second-nav li{
display:inline;
list-style:none;
padding:0 5px;
}
.sidebar{
float:left;
width:150px;
}
.body{
width:340px;
float:left;
padding 5px
}
.second-page{
border:1px solid #999;
padding:10px;
}
Most likely, you should use iframes anyway - most likely, you were having a communication problem with your supervisor. Maybe their degree is in managerial stuff or so, or it is in CS, but they don't know much of JavaScript. Maybe they don't even know what an iframe is. That is most likely, and that's why you got all those down-votes. It is simply hard to fathom any scenario where sane people (who aren't having a communication problem right there) would really want to do something like "do what iframe does --that is, embed a page--, but without using iframe". And you are saying you want to "embed a page", right? So, use iframe, there you go. I could say, in order to "do what iframe does, but without using it", use an svg tag, and then a foreignObject tag inside that, that is kind-of half way like an iframe. But again, it seems unlikely that this is what you really want.
But you deserve the benefit of the doubt. Maybe I'm wrong, and you really should embed the page using "copy and paste" - which is a lot more work than iframe. It could be about your page staying the same when the embedded page goes down or changes, who knows.
In that case, you would indeed get "body inside body" in your HTML, from copying the body you want to embed from the foreign page's HTML into your own page's HTML. (you'll also have to copy some-but-not-all JavaScript, and some-but-not-all CSS, and all that can take quite some time.)
"body inside body" most likely isn't "well-formed", but it is OK to ignore that, because browsers (having to be backwards compatible) are very very robust when it comes to non-"well-formed"ness.
Then, when you want to ensure that the foreign CSS will apply to the embedded part, while the CSS of your page doesn't apply, the "body in body" quirk might just be a blessing in disguise. Namely, you could then prepend body>body to every path in the copied foreign CSS (except if it contains body, then replace body with body>body). And then, give the outer body a class which the foreign page is certain not to use (such as, use your own name), and prepend body.coskan everywhere in "your" CSS. This is very similar to what Jacques is suggesting.
Maybe a better idea (if indeed "creating an offline copy" of the foreign page is the issue) is this: Open the page you want to embed in a separate window/tab. Then, write some JavaScript, which uses window.getComputedStyle and element.style.lorem=ipsum in order to modify each dom node (within the part of the page you wish to embed) so that it has the style used in rendering (the computed style) as an inline style, so that all the CSS is "pushed into" the HTML (or DOM). Then, insert your modified HTML into your page. Most likely, someone has already written such a "CSS inline-ifyer" tool. The resulting HTML is "ugly", but who cares. It does what you want, and this method is a lot faster (development time) compared to the "Jacques method", and the embedded page really is static, unlike it would be, were you using iframe. ("static" meaning, if Oracle changes their page, it does not affect your page.)
On second thought, above "better idea" is really only/mostly suited if the embedded page doesn't have JavaScript; otherwise, better stay with "Jacques method". Yet another approach (if indeed, the to-be embedded part is non-interactive): make a screen shot, and include the image.
But maybe it's not "static" at all, and you actually need to communicate with the foreign page (e.g. query external database). Then, my initial "miscommunication assumption" is even more likely. Why on earth, in that case, not iframe? Well, you could do an XMLHttpRequest, and then dissect the result with JavaScript. It's then much more flexible than the iframe. But much more work, also.
Related
I want to write semantic beautiful no-nonsense HTML. When is the right time to include class and when it's not? Should I add class on every element of my HTML?
To write semantic markup, we must use HTML tags correctly so that our markup is both human-readable and machine-readable. When we write semantic markup we can no longer select HTML elements based on visual presentation. Instead, we select HTML elements based on their semantic meaning, and then use CSS to define the visual presentation of our content. When writing semantic markup, the presentation of web page elements is kept completely separate and distinct from the markup of the content itself.
<body>
<ul class="post">
<li class="title"> <h3>Title of Post</h3> </li>
<li class="content"><p> Lorem Ipsum bla bla..</p></li>
<li class="hashtag">#samplepost
</li>
</ul>
</body>
<style>
.title{code}
.content{code}
.hashtag{code}
</style>
or
<body>
<ul class="post">
<li> <h3>Title of Post</h3> </li>
<li><p>Ipsum bla bla..</p></li>
<li>#samplepost </li>
</ul>
</body>
<style>
.post > li > h3{code}
.post > li > p {code}
.post > li > a {code}
</style>
Which of these is more semantic? Should we use class on everything or only when necessary?
Only use classes when you want to style a group of elements in a similar way (and ids for unique elements), it can be confusing for someone picking up your code if class names don't have any styles attached to them, and it just adds clutter.
Using semantic tags will make your html more semantic - ie. header, nav, main, footer, aside - etc. Some of these tags even make it easier for screen readers to navigate. w3 schools has good info about semantic tags: https://www.w3schools.com/html/html5_semantic_elements.asp
It is better not to be attached to HTML tags, who knows where else you will have to use a similar interface. It’s best to stick with some CSS methodology (for example BEM) and write styles based on CSS classes. From the presence of classes, the layout will not be less semantic. The main html tags to write correctly.
In general, if you want to avoid problems in the future, use the css classes.
I would write like this:
<body>
<div class="posts-list">
<h3 class="posts-list__title">Title of Post</h3>
<ul class="post-list__ul">
<li class="post-list__item">
<p> Lorem Ipsum bla bla..</p>
</li>
</ul>
<div class="posts-list__hashtag">
#samplepost
</div>
</div>
</body>
Creating classes everywhere is a lot of work and can potentially cause some problems later on. If you add a class to every HTML tag, imagine how hard to maintain the code is going to be if the project becomes bigger. As mentioned above there are specific methodologies which can be really helpful, and BEM is a popular, but not the only one, you can use other. If you don't want to use methodology and stick with simple classes for now (though at some point I really suggest diving into that topic, you don't have to know perfectly how to use specific methodology, but how they works, if you ever join any team working with code, then they are going to tell you what methodology they picked for the project), I suggest using second code, but with comments:
<body>
<!-- Post -->
<ul class="post">
<!-- Title -->
<li>
<h3>Title of Post</h3>
</li>
<!-- Content -->
<li>
<p>Ipsum bla bla..</p>
</li>
<!-- Hashtag -->
<li>#samplepost </li>
</ul>
</body>
<style>
.post>li>h3 {
code
}
.post>li>p {
code
}
.post>li>a {
code
}
</style>
Comments are really simple and powerful tool. They will help you getting oriented in the project really quick, and avoid adding unnecessary classes for semantics.
The first thing to note is your content is not a list, so you shouldn't be using ul/li. That bad semantics, and as such worse than no semantics at all.
Your semantic markup is this:
<body>
<h3>Title of Post</h3>
<p>Lorem Ipsum bla bla..</p>
#samplepost
</body>
If you want to create a containing block for your post, to might reasonably wrap it in a div element, and although it's not necessary for such simple content, you could also consider wrapping it in a main element. You could put your anchor inside a p element but that makes no semantic difference.
Now you add one or more classes to any element when it is sensible to do so. What is sensible? It means not going over the top, forcing a class onto an element just because it looks naked without one. Generally, a good rule of thumb is to add a class when there's a utilitarian purpose in doing so. Classes are a way of putting you content in to categories, so that categorisation should be useful in some way.
For example, it might be that you want to style all the content with a particular category a similar way. Or it might be that you want to add some common functionality via JavaScript to all the content in a particular category.
Or it might be that you want to identify a category of content for your maintenance purposes. For example, suppose you have a large document describing products that you sell. With each product is a price. Even if you have no intention of styling the price differently from the other content, nor have any relevant JavaScript, you might add a class of "price" to each one, so that when the time comes to update your prices, you can easily find them all in your editor, and thus make sure that you don't miss one.
For each utilitarian purpose, think about opportunities, rather than necessities. By adding a class to categorise some some content, you are creating an opportunity for common styling, or functionality, or discovery to be applied.
I've learned to make the main navigation with a list like that:
<ul>
<li>nav-item</li>
</ul>
Now additionally, I need two top navigations, one left for social buttons and another right for other things. Someone told me better to build those top navigations by 2 like that:
<div>
top-nav-item
</div>
And I'm confused. Why is that better? Could someone tell me the advantage of the second way?
Thank you~
I would recommend using <nav> elements, which is HTML5 spec (see also here). Semantically it fits better with navigational elements, and it might help understand search engines better what elements of your website they are looking at. You can put <a> elements inside the <nav>. A search engine might be able to better understand that those are links to other pages, because that is what anchor elements are made for (linking to other pieces of content).
For how it looks, it doesn't matter; pretty much all elements can be made to look like a menu with buttons. Furthermore, search engines are pretty smart nowadays, and they will probably understand most of your website anyway, even if you don't use the proper elements all the time.
That being said, those elements are there for a reason, so why not use them?
The mozilla developer network's example that I reference above uses the following, but to me personally it does not necessarily always make sense to put everything in a <ul> element.
<nav class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
Why is that better?
It isn't.
HTML is a semantic markup language. It is designed to describe the semantics of your data.
You have a list of links.
The markup should express that it is a list of links not a series of generic blocks with links in them.
I have created example that you want please check below link.
Click on Run.
.nav{float:left;}
.nav li,.social li{float: left;margin-right: 22px;list-style: none;}
.social{float:right;}
<header>
<ul class="nav">
<li>Home</li>
<li>About us</li>
<li>Contact</li>
</ul>
<ul class="social">
<li>Facebook</li>
<li>Google</li>
</ul>
</header>
I'm currently trying to come up with a good and accessible way to format a status indicator which should be rendered within a set of wizard-like pages on a website. The website should provide a multipage form with a status indicator on top of it as demonstrated in the wireframe below:
Given the new progress-tag in HTML my first thought was to do something like this:
<progress value="2" max="3">
<ul>
<li>Beginning</li>
<li class="now">Right now</li>
<li>End</li>
</ul>
</progress>
... but since <progress> only accepts phrasing content using a list is not really an option. So right now I would probably go with something like this, integratinng the ARIA progressbar-role:
<ul aria-role="progressbar" aria-valuenow="2" aria-valuemin="1" aria-valuemax="3" aria-describedby="state2" aria-valuetext="Right now">
<li id="state1">Beginning</li>
<li id="state2" class="now">Right now</li>
<li id="state3">End</li>
</ul>
But again, I'm not really sure if the progressbar role can be applied in such a way to a list.
Another problem is, that <progress> is rendered as progress bar in Opera, for instance, so >progress> itself is probably not really a viable solution altogether :-(
Can anyone perhaps recommend an accessible status bar that does not only rely on using a single image?
Current solution
For now I will go with following markup:
<section class="progress">
<h1 class="supportive">Your current progress</h1>
<ol>
<li><span class="supportive">Completed step:</span> Login</li>
<li class="now"><span class="supportive">Current step:</span> Right now</li>
<li><span class="supportive">Future step:</span> End</li>
</ol>
</section>
All elements of the class "supportive" will be positioned off-screen. IMO this way we should have a nice compromise of semantic markup (the state succession is in my opinion really an ordered list ;-)) and accessibility thanks to the additional header and status text for each step.
According to whatwg, you're not supposed to assign progressbar role to <ul> elements.
I'd just ditch <ul> and describe progress using (surprise) phrasing content:
<section role="status">
<h2>Task Progress</h2>
<p>You're now at <progress value=2 max=3>"Right now" step</progress>.
</section>
Update: You're right, progress doesn't suit here, it's more like an interactive form widget. I should've checked first, before taking it from your first example. But anyway, the point is there's no need to use a list (even more so, unordered list), when you can just describe what's going on in plain text. In the case that the list of past and future steps is necessary, I'd just add two more paragraphs, one before the status (‘You've completed the "Beginning" step’), and one after (‘Next step will be the "End" step’).
However, I admit that this isn't a complete answer to your question.
Also, I'd say some aria attributes look redundant to me. For example, aria-valuetext perhaps would make more sense in the context of interactive widget, when there's no other human-friendly description of its state. Though I may be wrong here.
Take these two pieces of markup:
<div id="header">
<img src="/img/logo.png" alt="MyLogo" />
<ul id="misc-nav">
<li>..</li>
</ul>
<header>
<h1>Welcome to Bob's Website of Fantastical Conbobulations</h1>
<p>The smell of invention awaits you...</p>
</header>
</div>
and
<header>
<img src="/img/logo.png" alt="MyLogo" />
<ul id="misc-nav">
<li>..</li>
</ul>
<h1>Welcome to Bob's Website of Fantastical Conbobulations</h1>
<p>The smell of invention awaits you...</p>
</header>
My example may not be perfect, but I'd like to know if the purpose of the tag is for semantic definition of the content, or is it block level structural definition with CSS?
It is my understanding from the spec itself, that the first example is the correct interpretation, yet I see the second being touted as the right way.
Can you offer any clarity on it?
Both are fine. But what exactly do you mean by "structural" vs "semantic"?
It's your first method (semantically).
The < header> tag defines an
introduction to the document.
<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>
<p>The rest of my home page...</p>
http://www.w3schools.com/html5/tag_header.asp
Spec: http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element
The header tag purely semantic.
However, in fact all HTML tags are to provide a context to the content (= semantics).
Use CSS to style your content approperiately.
I would advocate the following combination of markup and CSS:
In your CSS:
header {
background: #fff url(/img/logo.png) top left no-repeat;
padding-left: 64px; /* or whatever required to display margin correctly */
}
/* if you REALLY want your navigation to appear as a bulleted list */
nav a {
display: list-item;
}
In your page markup:
<nav>
<a>...</a>
<a>...</a>
</nav>
<header>
<h1>Welcome to Bob's Website of Fantastical Conbobulations</h1>
<p>The smell of invention awaits you...</p>
</header>
This way you're using the semantic <header /> and <nav /> tags to mark up text content, and then using CSS to enhance the presentation with display formatting, logo images, etc.
I recall - although alas I can't find the sources now - that the proposed new elements in HTML5 (header, nav, footer, aside, article, etc.) were chosen based on analysis of Google's database of websites to identify the most commonly-used ID attributes assigned to DIV elements, figuring that those represented the most common scenarios where developers were using DIVs to wrap meaningful elements of their page structure.
HTML5 actually does away with block/inline distinction in favour of a more nuanced content model. The header element is flow content, which is like the default state for HTML5 elements. Semantically it should be considered as introductory information for its nearest section content or sectioning root ancestor.
I think both your examples are valid uses of the element, though I personally would probably markup your first one this way:
<header>
<img src="/img/logo.png" alt="MyLogo" />
<nav>
<ul>
<li>..</li>
</ul>
</nav>
<hgroup>
<h1>Welcome to Bob's Website of Fantastical Conbobulations</h1>
<h2>The smell of invention awaits you...</h2>
</hgroup>
</header>
I used to think that the first method is the proper way to use the element, as it is intended to provide relevant information for a given section it is included in, not being a section itself, besides we already have elements for structuring the content, but for what i've seen in some pages, the reason many people includes also a header element at root level is to provide that same information considering the whole page as a big section, so i've changed my mind to think both of the examples can be considered correct.
If you read the W3C HTML5 specification you will find that every html page should have only one H1 tag, so if you use h1 then h2 then h3 you might see some weird styling. That is because the browser expect one h1 on every html page when it parses it.
So you can instead use h1 h2 h3 tags and style them any way you want.
The point of using semantic html elements is because your website will be 'read' not only by web browsers but also by web crawlers, tools that read the page with voice, braile tools and many more applications and physical tools.
So when those applications read your website they don't read css, only html and might read some javascript. So when they see lang="en" they know to read the contents in the element in english etc. When they see "section" they know it's section element and when they see "aside" they know it is some aside element etc.
We can easy see the page and know what is what, but visually impaired and other people can't do that so for them this will be of great help. Think about that when you make your websites, think about all the people that will access it and how easy will be for them to do that.
That is the whole point of the new awesome html5 elements. You can make the same webpage just with one element - "div" for example, and with a whole range of new html5 semantic elements - article, section, header, footer, aside etc. The webpage will look the same in web browsers, but smart applications like search engine robots will crawl the page better and some applications that read web pages will parse the page more easily.
The point of web is to be open to all people and free, and I agree to that.
In the future, the web will evolve without doubt, new tools will be made that will parse web pages, and using new html5 semantic elements will make your webpages future proof, so these new tools will read our pages in smart way.
Hope this helped someone :)
I want to have a comments section in my app that looks like this:
response1
response1a
response1b
response1b1
response2
response2a
response2b
response2c
response2c1
response2c1a
response2c1a1
response2c1a1
response2c1a1a
response2c1a1a1
I believe it's called threaded comments. You've probably seen this format on many online discussion sites such as reddit.
What I'm wondering is how to implement this in the HTML of my app?
What type of html/css combination would make the most sense to allow this type of application-determined indenting?
In your HTML:
<div class="comment">
Response1
<div class="comment">
Response1a
<div class="comment">
Response1a1
</div>
</div>
<div class="comment">
Response1b
</div>
</div>
And in your CSS:
.comment { margin-left: 50px; }
This approach is very flexible and portable. You could also use <ul>/<li> instead of <div> (I guess it's possible to argue both in favour and against seeing threaded comments as semantically equivalent to unordered lists). The inner comment can also be wrapped in another <div> if you require it for additionaly CSS styling.
Update: I (slightly) prefer <div>s over <ul>/<li> because it simplifies your implementation.
Firstly, if you go with the list-based approach, you have to strip the default <li> style that most browsers use (a bullet point and padding). Secondly, you will probably also want to target the set of <ul>/<li>s that are specific to your threaded comments, because they should look different from other list structures. This means that even with the "semantic" approach, you have resort to classes. So in the end, what advantage do you really get, and is it worth the extra hassle?
We've been a little more careful with applying <ul> structures like this in our projects, and so far we're really happy about it. And apparently we're not the only one.
The most used structure is a combination of <ul>s (unordered list) and <li>s (list item). Each post would have a list of comments, for example:
<div id="post">
... (post content here) ...
<ul class="responses">
<li>response1</li>
<li>response2</li>
</ul>
</div>
Then, expanding that idea, each response may have a list of responses as well. These go inside the <li> item.
<div id="post">
... (post content here) ...
<ul class="responses">
<li>
response1
<ul class="responses">
<li>response1a</li>
<li>response1b</li>
</ul>
</li>
<li>response2</li>
</ul>
</div>
This approach is fairly lightweight code-wise, and is semantically (the tags used mean the right thing) most appropriate.
To add some css onto that to make it visually appealing, you can do something like this:
ul.responses {
padding-left: 4em;
}
ul.responses li {
border-width: 2px 0;
border-style: solid;
border-color: #ccc;
}
This indents each response list, and adds a small border onto the top and bottom of each response, effectively showing the user that this response contains another list of responses to this response.
Wouldn't embedded lists work? Embedded un-ordered lists with list-style-type turned off would do that effect. Maybe I'm not understanding your question.
ie.
<ul>
<li>response1
<ul>
<li>response1a</li>
<li>response1b
<ul>
<li>response1b1</li>
</ul>
</li>
</li>
</ul>
<ul> and <li> tags
Example:
<html>
<head>
</head>
<body>
<ul>
<li>
comment
<ul>
<li>I comment you
<ul>
<li>oh, and I comment you!</li>
</ul>
</li>
</ul>
</li>
<li>
another one
<ul>
<li>comment about your</li>
<li>well, another about you</li>
</ul>
</li>
</ul>
</body>
</html>
I hacked something like that together for ManagedAssembly.com. It's not perfect, but it might give you some ideas.
What you have is a series of nested lists with a given order so a series of nested <OL> elements would make most sense. You have give OL a left margin so that each level of nesting appears more indented than its parent.