In the project, I'm working on we have 4 individual websites and one shell to host all. The team is using Angular 2.0.0. Their approach they choose is embedding each website inside shell application (Using object tag). So that the Dom in high level look like
<html>
<head>
</head>
<body>
<object type="text/html" data="http://website1.com/#/" style="width:100%; height:100%">
<html>
<head>
</head>
<body>
Content of the Website 1
</body>
</html>
</object>
</body>
<html>
I am working as a FE dev and to me, this sounds so wrong! why? because I have html { with: 100%, width: 100% } and because we have 2 html tag nested it ruins the style. I believe there must be a better to just embed the content of the websites1.
Would you please give me your thoughts about the best way to do this and potentially not having 2 html and body tags nested.
I'd appreciate
Related
This question already has answers here:
How to link a CSS file from HTML file?
(2 answers)
Closed 1 year ago.
I am extreme beginner and I have this dumb problem.
So I wrote a css file and html file.
HTML :
<!DOCTYPE html>
<html>
<body>
<img
src="https://i.pinimg.com/originals/67/b2/a9/67b2a9ba5e85822f237caae92111e938.gif"
width="300" id="para1">
<p>Paragraph</p>
</body>
</html>
I did this for my css file
p {
color: red;
}
When I save and refresh my website, the html shows up.
The css doesnt show up like the paragraph doesnt change red. I also want to change the position of the image.
Please help!
I also want to know about indenting please.
Also should for website developing, should I learn css and html at the same time, or like html for 1 year, and then css for one year, because im learning javascript like in a 2 years, next year.
You must tell your HMTL page where to find your CSS.
To do that you have to add link tag into your head tag using:
<head>
<link href="/path/to/your/style.css" rel="stylesheet">
</head>
<link>: The External Resource Link element
The HTML element specifies relationships between the current
document and an external resource. This element is most commonly used
to link to stylesheets, but is also used to establish site icons (both
"favicon" style icons and icons for the home screen and apps on mobile
devices) among other things.
Take a look at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
In your case if your css file named style.css and your index.html file are on the same folder, your html should look like that:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<img src="https://i.pinimg.com/originals/67/b2/a9/67b2a9ba5e85822f237caae92111e938.gif" width="300" id="para1">
<p>Paragraph</p>
</body>
</html>
The HTML element contains machine-readable information
(metadata) about the document, like its title, scripts, and style
sheets.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head
If you want to use inline css you have to put your <style> tag between your <head> tag to make it processed by HTML.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<img src="https://i.pinimg.com/originals/67/b2/a9/67b2a9ba5e85822f237caae92111e938.gif" width="300" id="para1">
<p>Paragraph</p>
</body>
</html>
Also should for website developing, should I learn css and html at the
same time, or like html for 1 year, and then css for one year, because
im learning javascript like in a 2 years, next year.
Well, HTML, CSS & JS are the fabric of the front end so my advice is why not all three at the same time? They each compliment each other and after 3 years studying you will have understood more about them than focusing your time and energy learning each as separate entities.
Think of HTML as your initial sketch (your structure), CSS as painting your sketch (your make-up and beautifier), and JS as making your painting come to life (your functional and interactive parts). Simply put, it's more fun with working with all 3
What does #document mean?
I have a webpage built by a tool kit. There is a widget whit that I can embed own code. But it is encapsulated as an extra #document within the general html code of the page. I would like to overwrite the css of the general webpage, maybe using this embed code widget. How can I get elements (parents) outside of this extra #document? Thanks a lot for any help!
Miminal example:
<html>
<head>...</head>
<body>
<div class="title">Hello</div>
...
#document
<html>
<head>...</head>
<body>
i would like to inject anything here to change the color of the title
</body>
</html>
</body>
</html>
Can anyone tell me why special here?
<html>
<head>
<script src="editor.js"></script>
</head>
<body>
<div id="scripts" class="scripts">
Editor.Execute('<html>Html String</html>');
Editor.Execute('<something>Html String</something>');
</div>
</body>
</html>
document.getElementById("scripts").innerHTML shows something however html dissapears.
Execute('Html String');
Execute('<something>Html String</something>');
It behaves the same way in Firefox and Chrome.
You're running into this issue.
Basically, the browser sanitizes out the HTML tags before your JavaScript can even access the page – you can check in the Chrome elements inspector, your <html> tag is not there.
I guess the answer depends on what exactly you're trying to do, but if you're just trying to output that code onto a web page, you can just escape the characters:
<html>
<body>
<div id="scripts" class="scripts">
Execute('<html>Html String</html>');
Execute('<something>Html String</something>');
</div>
</body>
</html>
Then document.getElementById('scripts').innerHTML will output:
Execute('<html>Html String</html>');
Execute('<something>Html String</something>');
And then you can replace the HTML entities in JavaScript.
Without knowing what you do in that Execute() it is hard to say what is going on there.
Just in case: HTML document can have one and only one <html> node.
Call me crazy but I have been trying to make an HTML website using Visual Studio 2012 but every time I open the program and create a webpage it automatically makes it an XML. Is this normal? Is this the normal start to an HTML webpage or do I need to do something to change it?
I have looked through the Microsoft webpages help and the Visual Studio help and I cannot find anything that explains this to me.
All I want to do is make an HTML website
<head>
<style>
</style>
</head>
<body>
<h1></h1>
<h2></h2>
</body>
</html>
I know I can do this using a notepad.
Thanks for any help.
That is not XML brother. That is what HTML is like. Anywhere you go, you'll find the same pattern, and so does Visual Studio follows.
<html>
<head>
<style>
</style>
</head>
<body>
<h1></h1>
<h2></h2>
<p></p>
</body>
</html>
That is HTML, you don't need to do anything just add the content for the heading or paragraph elements. XML is something else, if you're confused you should first atleast try to check what's the difference here. :)
Good luck!
When I have a simple HTML markup like this:
<!DOCTYPE html>
<html>
<head>
<title>lawl</title>
</head>
<body>
</body>
</html>
When viewing the elements of the document, in the Chrome Deceloper Tool(F12) it looks likes this:
<!DOCTYPE html>
<html>
<head>
<title>lawl</title>
<style type="text/css"></style> <-- what the?
</head>
<body>
</body>
</html>
So, my question goes: Where does the style tag come from? What added it, and why?
Hope you guys can clear this up for us, it's been quite the subject the last 10 minutes in class ;-). Also worth mentioning; a class got added to a empty div in another document when the teacher tried it.
Edited title.
Chrome plugins can get access to your DOM, and so does the development tools. In this particular case, I think the development tools is the one to blame.
The empty style tag is probably a placeholder for injected CSS.
If you open the source code (view-source:www.example.com), you will see that your DOM is perfectly fine.
99:1 that the <style> element is a stylesheet injected by your AdBlock (or similar) extension.