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>
Related
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.
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.
I've included a screen shot rather than code for obvious reasons. I'm having trouble figuring out why the closing tags are turning red and I'm not sure if it's something really simple that I'm overlooking. I think it's something to do with the html element.
screenshot:
As you can see the meta, head and html closing tags are all read and I'm not sure why. They were fine before I added the lang=en-gb and utf-8 parts. Any help would be appreciated, thanks.
You should remove </meta> tag. <meta> doesn't need closing tag.
meta element is a self-closing element. It should be written like this:
<meta charset="utf-8">
<meta name="keywords" content="">
...
Edit: change /> to > per #Quentin.
Ive been making a website for a technology fair project, and it has come to a stage where I want to make it more universal. However when I try to add another language (Chines Mandarin as an example) It just converts the text to some wired english characters.
Here is my example Website
<html lang="cmn">
<head>
<title></title>
</head>
<body>
<!-- This is meant to say in Mandarin "This is some text" -->
這是一些文本
</body>
</html>
But when the page loads, this is what I get
這是一些文本
Im pretty sure that its not some settings in my browser Firefox, because I've or so tried it in Google Chrome
Any suggestions?
Add the following meta definition inside your head tag:
<meta charset="utf-8" />
Did you tried:
<meta charset="utf-8" />
?
I have Html (hello.html) like bellow
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test</title>
</head>
<body>
<div>
¿Hola cómo está?
</div>
</body>
</html>
It shows out as "¿Hola cómo está?" when run in browser
Is there any solution to get correct out put without altering the
hello.html file?
I hope that, it is in Spanish language but i looking for any other solution like as change the encode type or font in browser or editor.
Edit: Just noticed the requirement. But some Spanish characters require Unicode and you have to declare that in your html file.
Put this in your head.
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
I don't see whats wrong, if you are refering to the font type in the html and the webpage is different is because of your editor, if you really want to change the font you will need to set the font tag around your text or even better define it in the CSS
Based on the clarification in the comment section to your question....
If you are using Google Chrome, and your computer is set to an English locale, load the page, then right click on the body, and select "Translate to English."
Sounds like an interview trick question, rather than a programming one.
No.
You cannot do this without altering the html file.
Place this <meta> tag in your Head Section
<meta charset="UTF-8">