I've just found out the pseudo-classes utilisation (:nth-child etc...).
I have a question in my mind about this : The use of those pseudo-classes, which permit the suppression of the classes in the HTML code, is a benefit ? In relation with SEO, performance, W3C etc...
Here is an example (just a test, so no responsive and the image aren't loading, but we don't care) : https://codepen.io/anon/pen/XNjQEM
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Exercice Facultatif">
<meta name="author" content="Nathan Cheval">
<title>Exercice facultatif</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- START HEADER -->
<header>
<div>
<img src="imgs/logo.png">
</div>
<nav>
<ul>
<li>Acceuil</li>
<li>Activités</li>
<li>Contact</li>
</ul>
</nav>
</header>
<!-- END HEADER -->
<!-- START CONTENT -->
<div>
<section>
<article>
<div>
<figure>
<img src="imgs/mtp.png" alt="Lac de Montpellier">
<figcaption>
Lac de Montpellier
</figcaption>
</figure>
</div>
<div>
<h1>Les lacs d’Occitanie</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat ex a erat feugiat suscipit. Aenean mattis dolor eget metus tempor, et semper tortor viverra. Curabitur rutrum ornare dolor a molestie.<br><br>
Fusce ut arcu vulputate, bibendum urna sed, mollis odio. Integer dictum justo nulla, non rutrum odio lacinia eget. Sed faucibus metus vel lacus ultrices condimentum. Pellentesque molestie laoreet imperdiet. <br><br>
Morbi cursus blandit est. Sed id varius purus. Pellentesque id tempor felis. Praesent orci nunc, imperdiet et mi eget, luctus lacinia erat.<br><br>
</p>
Lire la suite...
</div>
</article>
<hr>
<article>
<div>
<figure>
<img src="imgs/mtp.png" alt="Lac de Montpellier">
<figcaption>
Lac de Gergovie
</figcaption>
</figure>
</div>
<div>
<h1>Les lacs d’Auvergne</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat ex a erat feugiat suscipit. Aenean mattis dolor eget metus tempor, et semper tortor viverra. Curabitur rutrum ornare dolor a molestie.<br><br>
Fusce ut arcu vulputate, bibendum urna sed, mollis odio. Integer dictum justo nulla, non rutrum odio lacinia eget. Sed faucibus metus vel lacus ultrices condimentum. Pellentesque molestie laoreet imperdiet. <br><br>
Morbi cursus blandit est. Sed id varius purus. Pellentesque id tempor felis. Praesent orci nunc, imperdiet et mi eget, luctus lacinia erat.<br><br>
</p>
Lire la suite...
</div>
</article>
<div class="clear"></div>
</section>
</div>
<!-- START CONTENT -->
</body>
</html>
Thanks for your help clarifying this subject
The key use for classes is to identify certain parts of your site which repeat here and there and should always be styled the same. Say, a date widget attached to each blog post in a list. Or a social media widget placed here and there.
<div class="posted-date">
<span class="month">Sep</span>
<span class="day">16</span>
</div>
You need something to uniquely identify these "objects" (yes, thinking of them as self-contained objects is a good idea). If you use custom HTML tags in one way or another, that's a good identifier:
<posted-date><month>Sep</month><day>16</day></posted-date>
In this case you do not need classes, since the tag name is sufficiently self-identifying. If you want to stick to a certain DTD though and cannot/won't define your own tags, classes serve this role instead.
Further, in moderately complex HTML, using only :nth-child selectors and such, to some degree you'll always end up identifying elements by their position within the page:
header > nav ul li:nth-child(2) span { /* the date widget /* }
Well, what happens when you move an element around? Now you need to adjust your CSS too. Or if the same element is in various positions on your page and should receive the same style every time? You'll need to specify a lot of selectors, and, again, adjust the CSS every single time you place the item someplace new.
If you don't need classes because you can identify an element well enough just by its or its parent's tag name or such, or your selectors are otherwise already well enough defined and won't easily break if you move things around a bit, absolutely, no need to add superfluous classes. However, in general, tying styles to the structure of your HTML produces tight coupling, which is pretty much always a bad idea.
Writing maintainable CSS is something of an art. You need to find the right balance for your project. The more complex, the more refined strategies you need to develop to keep your HTML and CSS sane. Going overboard with classes on simple projects may not be worth it. Avoiding classes at all costs on complex projects and you'll eventually paint yourself into an unmaintainable corner.
Related
On my main page, I have an emoji and it works fine. But I have the exact same code on my seond one and it does not work
I have tried looking for an answer but no else seems to have this problem
This bit is my main page that the code works on:
<head>
<meta charset='utf-8'>
</head>
<link rel="icon"
href="https://drive.google.com/uc?id=1G624t-8tJG_l29sdQ4COazA_c69aBB3Q&authuser=0">
<title>Game 👠Reveiw</title>
<link rel="stylesheet" href="styles.css">
<div class="topnav">
<a class="active" href="#home">Home</a>
Portal 2
CS:GO
Minecraft
</div>
<h1>Game 👠Reveiw </h1>
<h4>Portal 2 |
CS:GO |
Minecraft</h4>
<br>
<br>
<div class="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium quam
libero. Etiam fringilla auctor accumsan. Aenean tellus ex,<br>
convallis non enim at, pharetra accumsan ligula.
mi vel est bibendum rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.<br>
Sed ullamcorper feugiat quam, ac mattis quam finibus eu. Fusce eget justo a odio
ultrices efficitur. Donec elementum purus sed iaculis rutrum.<br>
Praesent ornare laoreet faucibus. Suspendisse consequat, nisi eu convallis vestibulum,<br>
nibh est imperdiet nulla, ut suscipit dolor ex scelerisque neque. Morbi sed mi
cursus, mattis velit a, laoreet velit. Donec nulla felis, scelerisque at sem
</div>
<footer>Game 👠Reveiw</footer>
This is my other page(connected to it) and the footer code doesn't work:
<head>
<meta charset='utf-8'>
</head>
<title>Portal 2</title>
<link rel="stylesheet" href="styles_portal_2.css">
<link rel="icon"
href="https://drive.google.com/uc?id=1Pp9iytPYBcUg7fOIsH6QuiyM7JeL9SKK&authuser=0">
<div class="topnav">
<a class="active" href="#home">Home</a>
Portal 2
CS:GO
Minecraft
</div>
<h1>Portal 2:</h1>
<h4>Home</h4><br>
<div class="center">
Portal 2 is a game for those lonely friday nights where you need that comfort of
Wheatley<br>
and the engaging aspect of the game.
while being relaxing and funny at times. With my times playing Portal 2, I got
sucked into a<br>
world where there is no competition and the only skill you need is problem
solving. In this<br>
game you are a test subject with a ‘Portal Gun’ that creates portals to complete
challenges.<br>
The challenges get harder and harder as you progress.<br>
Overall this game is amazing and would highly recommend it.<br>
<img width="400"
src="https://drive.google.com/uc?id=13djQKInGDpkkmiUEj8PwM-h-dkWsOHDt"title="nice"><br>
</div>
<footer>Game 👠Reveiw</footer>
Expected output to be an emoji but got some weird code
According to this well written article (https://www.kirupa.com/html5/emoji.htm) , there are two ways you can insert an emoji, by copying and pasting the emoji itself into your code or by grabbing the codepoints (https://emojipedia.org) for it and pasting that in your html.
Try using the emoji codepoints. If you load the below files in your browser, you can see that the emoji appears consistently in the browser on both pages.
page1.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<link rel="icon"
href="https://drive.google.com/uc?id=1G624t-8tJG_l29sdQ4COazA_c69aBB3Q&authuser=0">
<title>Game 🍔 Reveiw</title>
<link rel="stylesheet" href="styles.css">
<div class="topnav">
<a class="active" href="#home">Home</a>
Portal 2
CS:GO
Minecraft
</div>
<h1>Game 🍔 Reveiw </h1>
<h4>Portal 2 |
CS:GO |
Minecraft</h4>
<br>
<br>
<div class="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium quam
libero. Etiam fringilla auctor accumsan. Aenean tellus ex,<br>
convallis non enim at, pharetra accumsan ligula.
mi vel est bibendum rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.<br>
Sed ullamcorper feugiat quam, ac mattis quam finibus eu. Fusce eget justo a odio
ultrices efficitur. Donec elementum purus sed iaculis rutrum.<br>
Praesent ornare laoreet faucibus. Suspendisse consequat, nisi eu convallis vestibulum,<br>
nibh est imperdiet nulla, ut suscipit dolor ex scelerisque neque. Morbi sed mi
cursus, mattis velit a, laoreet velit. Donec nulla felis, scelerisque at sem
</div>
</body>
<footer>Game 🍔 Reveiw</footer>
</html>
page2.html
<html>
<head>
<meta charset="utf-8">
</head>
<title>Portal 2</title>
<body>
<link rel="stylesheet" href="styles_portal_2.css">
<link rel="icon"
href="https://drive.google.com/uc?id=1Pp9iytPYBcUg7fOIsH6QuiyM7JeL9SKK&authuser=0">
<div class="topnav">
<a class="active" href="#home">Home</a>
Portal 2
CS:GO
Minecraft
</div>
<h1>Portal 2:</h1>
<h4>Home</h4><br>
<div class="center">
Portal 2 is a game for those lonely friday nights where you need that comfort of
Wheatley<br>
and the engaging aspect of the game.
while being relaxing and funny at times. With my times playing Portal 2, I got
sucked into a<br>
world where there is no competition and the only skill you need is problem
solving. In this<br>
game you are a test subject with a ‘Portal Gun’ that creates portals to complete
challenges.<br>
The challenges get harder and harder as you progress.<br>
Overall this game is amazing and would highly recommend it.<br>
<img width="400"
src="https://drive.google.com/uc?id=13djQKInGDpkkmiUEj8PwM-h-dkWsOHDt"title="nice"><br>
</div>
</body>
<footer>Game 🍔 Reveiw</footer>
</html>
I am working on a puzzle given in below link
Semantics
It has 3 questions:
Update the website's HTML to make use of semantic elements so that:
The classless outer div element is replaced with a more appropriate element.
The divs with the image and caption classes are replaced with self-contained content elements.
The divs with the lorem-ipsum and description classes are replaced with elements, so that by default only the contents of the description element are shown. When the contents of the description element are clicked, the visibility of the rest of the lorem-ipsum element is toggled.
I tried adding class to outer div as <div class="header"> and <div class="container">. Adding a Div section to contain the image and caption and also other ways to solve the puzzle, but none of them are working, the test cases are not successful.
Can you please tell me what is the right approach for this puzzle.
Take a look at:
https://www.w3schools.com/html/html5_new_elements.asp
for example:
use <main> instant of the <div> over all elements
use <figure> instant of the <div> for the image
use <figcaption> instant of the <div> for the image caption
....
I used following semantic elements and it worked.
use <main> instead of <div> over all elements
use <figure> instead of <div> for the image
use <figcaption> instead of <div> for the image caption
use <details> instead of <div> for lorem-ipsum class
use <summary> instead of <div> for description class
The correct response is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Semantics</title>
</head>
<body>
<section>
<h1>Lorem Ipsum</h1>
<figure class="image">
<img src="https://www.testdome.com/files/resources/12362/5d766d82-359a-42e3-b8e7-36fc20fa8395.png" alt="Lorem Ipsum">
<figcaption class="caption">Lorem Ipsum</figcaption >
</figure >
<details class="lorem-ipsum">
<summary class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur vitae hendrerit mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris lacinia scelerisque nibh nec gravida.
Duis malesuada nec nibh sit amet pulvinar.
Phasellus congue porttitor arcu, ut suscipit nibh aliquam vel.
Nunc arcu lectus, egestas ut sem ac, euismod porttitor eros.
Phasellus tincidunt consequat pharetra. Maecenas sodales purus at nulla finibus dapibus.
Nullam varius at nisl vel euismod. Fusce aliquet ligula non tempor fermentum.
Nam fermentum posuere mauris, quis aliquam nibh dictum sed.</p>
</details>
</section>
</body>
</html>
While Madhukar's answer correctly provided the elements that TestDome is looking for to achieve a 100% score, it should be noted that the action of 'details' and 'summary' (toggling visibility of the 'p' element) does not work cross-browser (https://caniuse.com/#search=details) without the use of polyfils. These tests should be treated with caution - as the old saying goes 'there is more than one way to skin a cat'.
I recently enrolled into a web course. Currently learning html5 and css. I have to make 3 webpages; main, about me and hobbies. I've created pretty much they've asked according to the specification they gave me BUT I have one problem; some content does not display where its supposed to be. I've tried position: relative, position: absolute etc and modified the the position of it using bottom: 500px etc but it just doesn't look right. For example, on the code below, that is my 'About me' page. The pictures on the side is not currently aligned properly to the top of the main article. The pictures are besides the main article which is correct but its positioned a bit below. This happens throughout my webpages on tables elements..
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About Me</title>
<link property="stylesheet" rel ="stylesheet" href="cascadingstylesheet.css"/>
<!--[if lt IE 9]>
<script src="hpp://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<header>
<h1>About Me</h1>
<nav>
<ul>
<li>Main</li>
<li>About me</li>
<li>Hobby</li>
</ul>
</nav>
</header>
<hr>
<main>
<!--
Below I have used the article tag and the section tag. The article tag is nested inside
the section tag. This is because section tags are used to group related elements together
and the 3 articles are related since they contain information about me.
I didn't include one article tag because the articles are distinct from one another. E.g. One of the
article contains the types of mototbikes but another article tells the user information about me. !-->
<section title="border" id="aboutArticle">
<article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum ex. Phasellus eget placerat nisi. Curabitur scelerisque condimentum vulputate. Nullam mollis mauris vel porttitor fringilla. Cras risus erat, feugiat non aliquet sit amet, molestie nec magna. Phasellus eleifend a ligula et consectetur. Fusce et malesuada sem. Donec lacinia tortor urna, eu semper metus volutpat non. Phasellus sed sapien commodo ipsum faucibus dictum rhoncus in est. Vestibulum porta metus pulvinar, ornare quam a, tristique nisl. Nullam euismod neque est, at tincidunt nunc tincidunt a. Aenean ullamcorper tincidunt congue.</p></article>
<br>
<article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum ex. Phasellus eget placerat nisi. Curabitur scelerisque condimentum vulputate. Nullam mollis mauris vel porttitor fringilla. Cras risus erat, feugiat non aliquet sit amet, molestie nec magna. Phasellus eleifend a ligula et consectetur. Fusce et malesuada sem. Donec lacinia tortor urna, eu semper metus volutpat non. Phasellus sed sapien commodo ipsum faucibus dictum rhoncus in est. Vestibulum porta metus pulvinar, ornare quam a, tristique nisl. Nullam euismod neque est, at tincidunt nunc tincidunt a. Aenean ullamcorper tincidunt congue.</p> </article>
<br>
<article><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum ex. Phasellus eget placerat nisi. Curabitur scelerisque condimentum vulputate. Nullam mollis mauris vel porttitor fringilla. Cras risus erat, feugiat non aliquet sit amet, molestie nec magna. Phasellus eleifend a ligula et consectetur. Fusce et malesuada sem. Donec lacinia tortor urna, eu semper metus volutpat non. Phasellus sed sapien commodo ipsum faucibus dictum rhoncus in est. Vestibulum porta metus pulvinar, ornare quam a, tristique nisl. Nullam euismod neque est, at tincidunt nunc tincidunt a. Aenean ullamcorper tincidunt congue.</p>
<p>This blog was created on
<time datetime="10-10-2015 20:00">
the 10th of October 2015.</time></p>
<section>
<img id="motorbikePic" width="350" alt="Harley Davidson Logo "src="http://media1.santabanta.com/full5/Bikes/Harley%20Davidson/harley- davidson-82a.jpg"></img>
</section>
</article>
</section>
<!--
I have used the aside tag on my About page. Inside the tag there are images containing my
favourite types of cars. I did not include it in the article tag above because it's not necessarily
related to it since I said I like motobikes and not muscle cars.!-->
<aside title="cars">
<h3>My favourite cars:</h3>
<img src="http://gas2.org/wp-content/uploads/2014/07/challenger-hellcat.png" width="300" alt="Dodge Hellcat">
<br>
<img src="http://cartype.com/pics/6596/full/ford_mustang_shelby_gt500_f1_10.jpg" width="300" alt="Ford Shelby GT500">
<br>
<img src="http://www.forodefotos.com/attachments/chevrolet/14617d1289420971- camaro-2010-camaro-2010.jpg" alt="Chevrolet Camero" width="300">
</aside>
</main>
<!--
Footer tag is used at the bottom of the page since it more appropriate to use it at the bottom since
you are given more options such as contacting the web developer, in this case it is me.
!-->
<footer>
<hr>
<p>To get in touch with me you can click below:</p>
Click to email me!
</footer>
</body>
</html>
This is my CSS. My CSS contains some rules for my other pages so I pasted the relevant ones so that it'll be easier for you guys to read. These are the relevant rules for the code above but there may be some rules missing so I will also post the whole of the css if you guys require it.
CSS for the code above:
footer{
position: absolute;
right: 0;
bottom: -250px;
left: 0;
padding: 10px;
text-decoration:none;
}
#aboutArticle{
width:75%;
}
[title^="cars"]{
float:right;
margin: 0 1.5%;
position:relative;
bottom:505px;
}
[title^="bord"]{
border-style: dotted;
border-radius: 10px 30px;
}
body{
background: -webkit-linear-gradient(left, #4B0082, black , #4B0082); /* For Safari 5.1 to 6.0 */
background: linear-gradient(to right, #4B0082 , black, #4B0082); /*standard syntax*/
text-align: center;
padding-bottom:60px;
font-size:20px;
}
Just add one property and remove another property.
Add float:left; to #aboutArticle and remove bottom:505px; from [title^="cars"]
I'm trying to create a html template for email and I've encountered several problems (outlook does not handle image resizing etc.). One problem which i'm so far unable to solve is text wrapping within element (table or div) with fixed width.
Here is a simple example:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table width="300px">
<tr>
<td width="300px"">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed turpis nunc. Nulla nec sapien ut ligula sollicitudin vestibulum eleifend a augue. Integer felis nulla, venenatis non consectetur nec, vulputate at enim. Suspendisse potenti. Curabitur sed magna metus. Nullam ut lectus ac arcu malesuada convallis. Ut dictum facilisis augue et semper. Phasellus euismod maximus turpis, at finibus dolor placerat ut. Vestibulum ultrices imperdiet enim, ac pharetra nunc fermentum non.
</td>
</tr>
</table>
</body>
</html>
It renders to a neat little box in browsers and most email clients but outlook ignores the width entirely. Help would be much appreciated.
Wrapping does work, just take the px off of your width attributes. Outlook's really picky.
You have to set your line breaks explicitly with br tags for Outlook. It sucks but it is the only reliable solution.
I am trying to create a page as shown in picture. Now only tables are allowed and no css. I am having difficulty in understanding how to achieve as it is in original image. Any help please?
This is what I have written
<html>
<head>
<title>HTML</title>
</head>
<body>
<table height="350" width="773" background="bg.jpg" >
<tr><td><h1 align="right">Welcome to Full Moom Site</h1></td></tr>
<tr><td><h3 align="center">Music Company Full Moon</h3></td></tr>
<tr><td><p align="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate, odio ut auctor porta, quam urna convallis leo, ac ultricies felis mi eget mi. Pellentesque consequat nisl et metus tempor sodales. Quisque ultrices metus consectetur sem placerat eget molestie ipsum gravida. Duis scelerisque augue sed sem venenatis id congue mauris vehicula. </p></td></tr>
</table>
</body>
</html>
You won't get me to do the work for you :-) , but I'll offer up this advice. You'll need to slice up your background image into four parts, use colspan and rowspan on your <td> and <tr> tags, and border="0" on the <table> tag to get it to work. Here's an example, including a possible grid for your table layout. You'll need to move your navigation down a little bit; otherwise, you'll need a fifth slice for the left end of the blue arc.