I've looked both online and on stack
overflow but I haven't found any concrete
answer. I'd like to keep things organized
and correct.
When I look at websites and use dev tools
to dissect pages it seems hard to really
distinguish the appropriate spacing, if
you know of any reference that explains
that'd be awesome.
Also does, vs code have an extension or
shortcut that does this for you?
Exaggerated Example:
<html>
<header>
<How do i know when to tab out
<And when to tab in>
<body>
Thank you for your time. Have a great day!
I think what you are asking is regarding code indentation
There are no hard and fast rules - some prefer tabs to space and others prefer spaces (usually 2 or 4). The only important thing is to keep it consistent - choose one approach and stick with it.
in termas of code indentation its actually very simple - if something is a child of something else - it gets indented relative to that parent.
As a general rule try to prevent excessive nesting - sometimes it is better to pull out a level or two - but as a guide - here is a basic page skeleton with what I consider to be basic and acceptable spacing (indentation ) - note that there is a splash of Bootstrap in there to demonstrate indentation of realistic content.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<p>Hello, world!</p>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Label text"</label>
<input type="text" class="form-control" name="inputName"/>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
Code skeleton sourced from (https://gist.github.com/taniarascia/d0308ff82a1d4344a904) and modified to suit.
Also note that the above is good for reading in the dev environtment - but is often minimised to remove whitepsace in production environments. But when you are learning to code - one of the best habits to get into is to follow an indentation guideline - it helps code readability, chunkingg into smaller portions and allows easier recognition of when you have missed a closing tag.
Related
I am learning HTML5 (so don't judge me) and I came across something that doesn't make much sense to me.
How come that when I put the title after the meta bit like this, it doesn't become a title and somehow acts like it is in the body and not the head. If I put the title before the meta bit like this, it works as it is supposed to.
Hope you didn't have a stroke reading this as I am a beginner and not even close to good at explaining things. I'm also new to this website btw.
Many thanks,
Nathan
Its just a typo in your code, and kindly add your code in text format and refrain from adding pictures of your code.
Just close the meta tag on line 5 of your code and you're good to go.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="This is an awesome website">
<title>Welcome!</title>
</head>
<body>
<h1>POG WEBSITE!</h1>
</body>
</html>
I am currently at a dead end on one of the projects I am working on.
I'm working on the translation of an application in Xamarin Ios, at the moment
the entire application can be translated and the language of the application can be changed directly via the app.
But this application also has Tutorials pages that explain in a few words what is the purpose of this feature.
These pages are in html and have a relatively simplistic content that looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial 1</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="content-block">
<p>Use this page to add a new friend</p>
<p>It could be a good idea to give him a pseudo</p>
</div>
</body>
</html>
These pages should be translated on the fly when the user
decides to change the language of the application.
Currently the entire application could be translated into several languages except these html pages, simply because I have no idea what's the best way to do it.
I didn't find any information or documentation about this (I'm pretty sure that's because I'm using Xamarin Ios).
I am looking for a way to fill my html file with the contents of my resx files in which I would put the content html pages.
1 - I will have to save Html tags in my resx files if I decide to write <strong> this word </ strong>, which does not seem to me very practical and will oblige me to record every sentence and / or word that stands between specific tag ?
2 - How can I do this binding between my html file and my resx file? To get something like this
<!DOCTYPE html>
<html>
<head>
<title>Tutorial 1</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="content-block">
<p> [contentFromMyResxFile] </p>
<p> [AnotherContentFromMyResxFile] </p>
</div>
</body>
</html>
content being loaded directly from my resx file and so could adapt to the language of the application.
I am really basic at HTML/CSS but with the help from this website I managed to get the following working. The colour looks right, so its all working.
But when I put this in the HTML Source Editor in Moodle the colour disappears, so I know that its a HTML editor and the colour is contained in style as CSS. So i guess I need to link to a style sheet to give me that colour, but I have no idea how to do that. Or maybe I am wrong about that, and something else could be done.
I already checked W3 Schools, and its most likely I just don't have the jargon yet to properly look for the answer to this problem, so a google search when you simply don't have the vocab for what exactly I am looking for is difficult.
Please if you can help that's great, but I also want to better know what it is I should be looking at, as I am only doing this for Moodle, any places you can point me to where I can find or see how HTML/CSS works with Moodle so I can learn about it so I can slowly build up my own knowledge. I greatly appreciate this.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.label.label-default {
background-color:#009999;
</style>
</head>
<body>
<h1><span class="label label-default">Survey</span></h1>
</body>
</html>
I will answer to you , first you put style css in same file of html ,so remove the whole link of style . then in style write like this
I advise to you use Adobe Dreamweaver program , I hope my answer solve your problem.
For a simple use case example check out below:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>A Question for The Stackflow Community</title>
<link rel="stylesheet" type="text/css" href="css/global.css">
</head>
<body>
<script src="../js/cool-awesome-jquery.min.js"></script>
<div id="container"></div>
<div id="call-to-action">DUDE YOU NEED TO BUY THIS STUFF!!</div>
<div id="menu">
<button id="home">HOME</button>
</div>
<script>yada yada yada....</script>
</body>
</html>
I know that browsers offer some native relationship with the container div, or at least they can. But I see this use case alot in code, where the container div is created then closed. No special CSS is being used for it within the global.css file in this example. As you can see, no style tags are being used to add anything special either. So what I am asking is, why do this? What purpose does it serve?
As a sidenote, the body tag is outside of the container tag, whereas I would assume the inverse to be true, at least to follow what is expected as clean semantic markup. Any knowledge or feedback from the community is truly appreciated. A good answer deserves a good upvote for sure. Thank you!
-Cheers,
Branden Dnae
too vague to pinpoint an exact answer, however overall the probable effect is to have the content outside of the container (typically) pinned atop the container (or at least pinned in front, even if hidden), ala position:fixed; either 100% of the time, like a banner/header, or perhaps only upon user interaction...so think like a lightbox.
I've made a mobile version of my site. When loading the page however, the site is first shown without the CSS applied, and after a second (at most) it applies the CSS and renders it properly. This behaviour is consistent across all browsers (including mobile ones).
Do you have any idea, how I could force browsers to load the CSS first (which is really tiny in size) and then render the content? I've seen something about including the CSS files outside the head, but as far as I know it's against the specs, and I am afraid such hack may brake things on some mobile browsers.
Thanks!
Update
Here's the source
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Albite BOOKS mobile</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
<meta name="description" content="Free e-books for Java Mobile phones."/>
<meta name="keywords" content="free ebooks, free books, book reader, albite reader, albite books, java mobile"/>
<meta name="language" content="en_GB"/>
<meta name="classification" content="public"/>
<link rel="shortcut icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link href="/stylesheets/mobile.css?1289644607" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- .... -->
</body>
</html>
I believe I have found a better way to handle this...
At the top of your output file put the following:
<body>
<div id="loadOverlay" style="background-color:#333; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;"></div>
...
</body>
Then on the last line of your last loaded CSS file put:
#loadOverlay{display: none;}
This basically uses the problem against itself. The first bit of displayable html that is loaded places a blank canvas over top of everything while CSS loads and processes, the last bit of CSS to load and process removes the canvas. From my testing this solves the problem completely.
Have you ever used requirejs?
you could set after your
requirejs.config(<confObj>);
something like this
require(Array[<all your CSS & JS >]);
requirejs will do the cache (like) stuff for you!
requirejs api
You can ensure that an HTML element isn't displayed until its CSS is loaded with this simple technique:
// CSS
#my-div { display:block !important; }
// HTML
<div id = "my-div" style = "display:none;">
<p>This will be display:none until the CSS is applied!</p>
</div>
Because the div tag has display:none as an inline style, it will not be displayed until after the CSS is applied. When the display:block !important rule is applied, the div's inline style will be overridden and the div will appear fully styled.
Nathan Bunney - good idea that ispired me, but i think better way is to remove overlay with javascript after document is fully loaded.
$(document).ready( function() {
$("#loadOverlay").css("display","none");
});
Browsers read code from the top to the bottom, so the higher the code is on page, and how compact the code is, will affect the load time on the page. You can't really pre-load it like you would with images or something, so I would really look into caching the file, it's probably the best solution. Sorry theres no better alternative for this. But to be honest, one second load time isn't really too bad.