Why is my site blank when I add HTML or CSS? - html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🔥Mayur's Personal Site</title>
<style>
body{
background-color: #eaf6f6;
}
hr{
background-color: white;
border-style: none;
}
</style>
</head>
<body>
<img src="mayurrr.png" alt="mayuresh profile picture">
<h1>Mayuresh Bhosale</h1>
<p><i><strong> Student of Sanjivani College of Engineering, Kopargaon. </strong></i></p>
<p>Hi I am Mayuresh from Aurangabad. I am pursuing my B.tech from Sanjivani College of Engineering, Kopargaon.
<br>I am learning Web Development from udemy.</p>
<hr>
<h3>Education</h3>
<table border="1">
<thead>
<th>Year</th>
<th>School/College</th>
</thead>
<tr>
<td>2007-2017</td>
<td>Maharashtra Public School, Aurangabad</td>
</tr>
<tr>
<td>2017-2019</td>
<td>Sarosh Junior College, Aurangabad</td>
</tr>
<tr>
<td>2019</td>
<td>Sanjivani College of Engineering, Kopargaon</td>
</tr>
</table>
<hr>
<h3>Hobbies</h3>
<ol type="I">
<li>Photography </li>
<li>Playing Games </li>
<li>Listening to Music </li>
</ol>
<p>Contact Me</p>
</body>
</body>
</html>
this is the code!
If I try to add table and in that one row then website gets blank.This same happened when I tried to add background colour to horizontal rule in style tag. Did anyone faced same problem when learning HTML and css?
Now I have added exact same code which is not executing properly.

Your table is inside a ul element, and it's the only child element of that ul. That's invalid HTML. A ul has to contain li elements.
Just erase the ul opening and closing tag.

There are many possible reasons for a code to run blank on a computer. In some cases it might be because you haven't closed <body> or </head> tags properly (or maybe you have duplicates). In other cases however, it might have to do with your computers storage capacity. Check if your storage capacity says something like "0 bytes available" or a very low number. If this is the case you can clean up system files and you should be good.

Related

How to implement theme to html?

Okay so I'm 100% new to programming. The question format may also be wrong.
The Question: theme on html?
Still beginner on html. wanted it to look aesthetically pleasing to my eyes at least with what I've learnt. No CSS knowledge yet. I've been little bit searching whatever i feel like putting on my page(emojis).
I've searched Google and did what was written but it still doesn't display the theme.
Okay so here's the code so you can see, will add more things later as i learn(I know it's nothing for you all):
<html>
<head>
<meta charset=“UTF-8”>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#f7cac9">
<title>Galaxia
</title>
</head>
<body>
<h3 style = "position:absolute; right:150px; top:-10px; background-color:pink;">
Welcome to my weird abode 🦋
</h3>
<br>
<br>
<!-- added two br tags because otherwise heading and paragraph overlap -->
<div class="coder">
<p>This is a html example from me for now,
<br>
have fun.:) </p>
</div>
</body>
</html>
Thank you in advance!
In order to add styles to your HTML page, you use css (with the file extension .css -- for example styles.css). To make the styles visible on your html page, in the head section you would include <link rel="stylesheet" href="styles.css"/>. For instance, in the css file, you could include:
h3 {
color: #f7cac9;
}
Then, after adding the link rel, the h3 elements in your html page would be pink. Hope this helps! Alternatively, you could add tags in your html page.
Here's an example of adding css to an html page. By adding .coder {background: green}, the background-color turns green:
.coder {
background-color: green;
}
<html>
<head>
<meta charset=“UTF-8”>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#f7cac9">
<title>Galaxia
</title>
</head>
<body>
<h3 style = "position:absolute; right:150px; top:-10px; background-color:pink;">
Welcome to my weird abode 🦋
</h3>
<br>
<br>
<!-- added two br tags because otherwise heading and paragraph overlap -->
<div class="coder">
<p>This is a html example from me for now,
<br>
have fun.:) </p>
</div>
</body>
</html>
Like the other guys posts.
HTML - is a markup language. You will say for the browser: Hey this is a paragraph ... <p>This is a paragraph</p>
CSS - You will make things looks nicer. You can change all the colors, backgrounds, fonts, sizes, margins...
One place to find a quick tutorial and it is also a good place to know is w3schools.com.
It is famous and a lot of people use it.
I hope that you keep pushing.
The first step is the hardest one!

Table on HTML page takes much more width than div with using <viewport "width=device-width initial-scale=1.0">

I’m making a simple HTML page with text and table and I want it to be responsive. So I used <viewport “width = device-width initial-scale = 1”> but my page looks like this:
But I need it to look like this:
I already tried to remove table from page and everything looked good. But with the table it looks not properly. How can I make it to look properly without BootStrap?
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width initial-scale=1.0"/>
<title>Name of title</title>
<style>
table { border: solid 1px; border-spacing: 0 }
td { border: solid 1px; padding: 0.5em }
</style>
</head>
<body>
<h1>Poker Tutorial</h1>
<div>
<p>No-Limit Texas Hold'em is often said to be a game that takes only a minute to learn, but a lifetime to master.</p>
<p>While the game can involve extremely complicated strategies - especially by the pros at the top level of the game, the fundamentals are fairly simple to learn. After watching this short video you should be able to take a seat at a play money table and know what your options are when it is your turn to act. </p>
</div>
<h2>Standard poker combinations</h2>
<table>
<tr><td>Combination</td><td>Example</td><td>Column3</td> <td>Column4</td><td>Column5</td></tr>
<tr><td>Royal Flush</td> <td>A♥K♥Q♥J♥10♥</td><td>42112</td><td>21123</td><td>123123123</td></tr>
<tr><td>Straight Flush</td><td>K♥Q♥J♥10♥9♥</td><td>3216</td><td>4234</td><td>123123123</td></tr>
<tr><td>Full House (3+2)</td><td>A♥A♠A♦8♥8♠</td><td>374214</td><td>23423423</td><td>123123123</td></tr>
<tr><td>Flush (one suit)</td><td>K♥Q♥J♥8♥7♥</td><td>512108</td><td>24234</td><td>123123123</td></tr>
<tr><td>Straight (row)</td><td>K♥Q♠J♦10♣9♥</td><td>1022100</td><td>24234234</td><td>123123123</td></tr>
<tr><td>Triple (3 of a kind)</td><td>A♥A♠A♦K♥2♣</td><td>5491221</td><td>423423</td><td>123123123</td></tr>
<tr><td>Two pairs</td><td>K♥K♠8♦8♥2♣</td><td>123552</td><td>42125</td><td>123123123</td></tr>
<tr><td>Pair</td><td>K♥K♠8♦3♥2♣</td><td>1098240</td><td>422133</td><td>123123123</td></tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width initial-scale=1.0"/>
<title>Name of title</title>
<style>
table { border: solid 1px; border-spacing: 0; width: 100%;}
td { border: solid 1px; padding: 0.5em }
#wrapper{ max-width: 100%;} //CHANGE THIS TO IF NEEDED.
</style>
</head>
<body>
<div id="wrapper"> // <-- ADD THIS WRAPPER TO INCLUDE ALL ITEMS
<h1>Poker Tutorial</h1>
<div>
<p>No-Limit Texas Hold'em is often said to be a game that takes only a minute to learn, but a lifetime to master.</p>
<p>While the game can involve extremely complicated strategies - especially by the pros at the top level of the game, the fundamentals are fairly simple to learn. After watching this short video you should be able to take a seat at a play money table and know what your options are when it is your turn to act. </p>
</div>
<h2>Standard poker combinations</h2>
<table>
<tr><td>Combination</td><td>Example</td><td>Column3</td> <td>Column4</td><td>Column5</td></tr>
<tr><td>Royal Flush</td> <td>A♥K♥Q♥J♥10♥</td><td>42112</td><td>21123</td><td>123123123</td></tr>
<tr><td>Straight Flush</td><td>K♥Q♥J♥10♥9♥</td><td>3216</td><td>4234</td><td>123123123</td></tr>
<tr><td>Full House (3+2)</td><td>A♥A♠A♦8♥8♠</td><td>374214</td><td>23423423</td><td>123123123</td></tr>
<tr><td>Flush (one suit)</td><td>K♥Q♥J♥8♥7♥</td><td>512108</td><td>24234</td><td>123123123</td></tr>
<tr><td>Straight (row)</td><td>K♥Q♠J♦10♣9♥</td><td>1022100</td><td>24234234</td><td>123123123</td></tr>
<tr><td>Triple (3 of a kind)</td><td>A♥A♠A♦K♥2♣</td><td>5491221</td><td>423423</td><td>123123123</td></tr>
<tr><td>Two pairs</td><td>K♥K♠8♦8♥2♣</td><td>123552</td><td>42125</td><td>123123123</td></tr>
<tr><td>Pair</td><td>K♥K♠8♦3♥2♣</td><td>1098240</td><td>422133</td><td>123123123</td></tr>
</table>
</div> //<-- CLOSE THE WRAPPER TAG BY DOING THIS
</body>
</html>
Here is my edited version of your code.
1.) I added a div using the id wrapper, just above the first <h1>.
2.) Add the closing tag after the table.
3.) Set properties to the ID inside the <style> element. I added max-width: 100% because it will resize depending on the screen.
Let me know if it works like you asked for, otherwise I'll try something else. :) Good luck mate.

How can I remove all white space surrounding HTML email?

I've got the following html and css to be used as a template for generating e-mail messages.
But when it comes to receiving the e-mail on my postal programme I have a few pixels of white margins every side.
Is it possible to remove it while using divs or is there another way to avoid these annoying white spaces?
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Lack of title</title>
<link href='https://fonts.googleapis.com/css?family=PT+Mono&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style>
body, html {
margin: 0!important;
padding: 0!important;
background-color: gray;
}
#nav {
height: 60px;
width: 100%;
background-color: #0078d7;
}
#content {
width: 1160px;
height: 800px;
background-color: #6f6767;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="nav">
{title}
</div>
<div id="content">
{content}
</div>
</body>
Different e-mail clients render HTML e-mails differently. But there are a few basic practices you should adhere to (see references below).
In looking at your code, there's a good chance your problem stems from the use of embedded styles. Here's what MailChimp has to say about that:
Because browser-based email applications, such as Gmail, strip out
<head> and <body> tags by default, always use inline CSS over embedded
CSS.
So, the padding: 0 and margin: 0 in your head section are possibly being ignored or overridden.
Designing HTML e-mails is not like designing HTML websites. There's a huge technology gap between e-mail clients and web browsers. It's as if browsers keep evolving, but e-mail clients are stuck in 1998.
In the world of HTML e-mail, embedded and external styles are bad, inline styles are good, javascript is bad, tables for layout are good. In this world, old-school coding methods are alive and well.
More information:
CSS in HTML Email
Best practices for styling HTML emails
Best Practices & Considerations when writing HTML Emails
Because of the way e-mail clients render HTML - and many of them render the same HTML differently, you're better off building your e-mail with tables. Tables seem to be recognised across all clients.
Also, always use inline styles as internal and external stylesheets can cause problems. This code seems to get rid of whitespace accross most clients:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Lack of title</title>
<link href='https://fonts.googleapis.com/css?family=PT+Mono&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style>
</style>
</head>
<body>
<div>
<table width="100%" bgcolor="#333333" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<table width="100%" height="60" bgcolor="#0078d7" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="60">
{nav}
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="1160" height="800" bgcolor="#6f6767" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="1160" height="800">
{content}
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>

Gifs wont appear on website

I'm making a small website for one of my classes, I want to put 2 gifs and 2 images in one table 2x2 for some reason they just show up as tiny red boxes, The css on the page creates a red border so I'm assuming all that's showing is the css.
<html>
<head>
<title> HYPE! HYPE! HYPE! HYPE! HYPE! HYPE! HYPE! HYPE! HYPE! </title>
<meta name="description" content ="Website for the game mirrors edge 2" />
<meta name="author" content="---" />
<meta name="copyright" content="©2015" />
<!-- specify a base formatting style sheet file-->
<link rel="stylesheet" type="text/css" href="base.css" />
<!-- specify a local formatting style sheet for this page-->
<style>
body {background-color : light-grey; color : silver;}
</style>
</head>
<body>
<table>
<caption> Mirrors edge 2 </caption>
<tr>
<td> Home </td>
<td>Commments</td>
<td>Story</td>
<td>What we know</td>
<td>Hype!</td>
<td>List of Characters</td>
<td>The Studio</td>
</tr>
</table>
<header> <h2> I can't wait </h2>
<p>It's going to be so good</p>
</header>
<h1> GET STOKED </h1>
<table>
<caption> HYPE </caption>
<tr>
<td><img src"hype1.gif"></img></td>
<td><img src"hype2.gif"></img></td>
</tr>
<tr>
<td><img src"faith3.jpg"></img></td>
<td><img src"logo.jpg"></img></td>
</tr>
</table>
<h3> My Sub sub heading </h3>
<br />
my text my text my text
</br>
Return
</body>
</html>
If they are showing up as error boxes inside the table, the URLs of the images are probably incorrect. Check and ensure the images are correctly named and in the same folder as the HTML file.

circular bullets are not displaying in html page

I am writing an un-ordered list in a html page. I have used css class for getting bullets for "li" tag. But bullets are not displaying, Instead horizontal lines are coming. I am writing html page in ColdFusion (.cfm) pages.
My html Page:
<!DOCTYPE HTML>
<html>
<head>
<title>Resource Optimization</title>
<META NAME="resource-type" CONTENT="document">
<META NAME="Description" CONTENT="DEPT: RESOURCE Optimization: Index">
<META NAME="KeyWords" CONTENT="Departments, Index, DEPT, Resource, Management, North, Generation, Report, Reports, OATI, On, Line, Tagging, Daily, Gas, Totals, Energy, Marketing, Purchase, Sales, Schedule, Schedules, Pricing, Pathing, Optimization">
<META NAME="Author" CONTENT="Intranet Contruction Crew for Sierra Pacific Resources">
<META NAME="Reply-to" CONTENT="dtheiss#nevp.com">
<META NAME="Generator" CONTENT="ColdFusion Studio 4.0">
<META NAME="Copyright" CONTENT="2000 Sierra Pacific Resources">
<META HTTP-EQUIV="content-style-type" CONTENT="text/css">
<META HTTP-EQUIV="content-language" CONTENT="en-US">
<style type="text/css">
ul.list{
list-style-type:circle;
}
</style>
</head>
<cfinclude template="/matrix_nav_top_full_min.cfm"><br>
<!--- <body> --->
<div id="page">
<div class="container">
<div class="container-inner">
<div class="page-container" >
<!--- <cfinclude template="/matrix_nav_top_full.cfm"> --->
<!-------Resource Management DEPARTMENT INDEX PAGE---------->
<font style="font-family: Verdana, Arial, Helvetica; font-size: 10pt;">
<div align="right" style="background-color:FFFFFF; "><strong>Keyword: RM</strong></div>
<div align="left" style="background-color:FFFFFF; ">
<!---LOKI 17129 <img src="/dept/Graphics/title_resourceMgmt.jpg" width="480" height="40" border="0" alt="Resource Management Department">--->
<!--- LOKI 19816 <img src="/dept/Graphics/title_resourceProcurementOpt.jpg" width="99%" border="0" alt="Resource Procurement and Optimization">--->
<img src="/dept/Graphics/title_resourceOptimization.jpg" width="98%" border="0" alt="Resource Optimization">
<hr size="3">
<br>
<strong>Departmental Areas:</strong>
<ul class="list">
<li>Gas Optimization
<li>Market Prices
<li>Reports
<li>Short-Term Analysis
<li>Short-Term Optimization
<li>Transaction and Market Analysis
</ul>
<br><br>
<!--- <cfinclude template="/new_footer.cfm"> --->
</div>
</div>
<cfinclude template="/new_footer_rd_min.cfm">
<!--- </body>
</html> --->
I am getting a page like below.
How can I get Bullets in li.
<li> elements naturally have a bullet beside them, however, you may have some other property overriding this making dashes showing up.
Add the proper list-style-type to force them back to bullets:
li{
list-style-type: disc;
}
This is not shown in your fiddle because no CSS is provided in your fiddle, so the fiddle will appear to be exactly the same. Note that the elements do have bullets beside them in your fiddle. If I apply the list-style-type to my fiddle, it still looks the same.