How to accomplish this layout with CSS and HTML? - html

I would like to accomplish this layout with CSS and HTML.
I started a fiddle which is a start, but I don't know how to make the fonts look more like the goal.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Register</title>
<script src="/scripts/jquery/jquery-1.9.1.js" type="text/javascript"></script>
<script src="/scripts/application.js" type="text/javascript"></script>
<link href="/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h3 class="marg-left title"><img src="/images/logga.png"> Account Administration</h3>
<hr />
Add new account <br> Search account <br> Export <br> Import <br> Setup <br> Log out
</body>
</html>

I created a fiddle that closely matches your UI mockup. Unfortunately futura is not a very freely accessible web font, so I have instead used a google font called Raleway.
For the single button links on the sidebar I have created button modules, just add or delete these as you wish. Hope you find it useful!
<!-- SINGLE BUTTON MODULE -->
<a href="#"><div class="navigation-button">
<div class="navigation-header">Add new account</div>
<div class="navigation-desc">Add new user account</div>
</div></a>
http://jsfiddle.net/HEue6/1/

I don't think futura is a default font. You need to include the fonts you want to use. I recommend google fonts since it worked great for me in the past, but there're many services like this. Here's a brief how-to for including it in your page:
Go here:
http://www.google.com/fonts
Find the font you want (futura is not in google, it is external).
Click in "add to collection".
Click "use" on the bottom right of the page
Then copy something like this in your webpage (before the css):
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC' rel='stylesheet' type='text/css'>
Finally put this in your css:
font-family: 'Alegreya Sans SC', sans-serif;

Related

How can I insert a good reads logo into an html page?

I'm a beginner, alright?
I'm trying to build an HTML page that needs social media logos. I have all the ones I need except for good reads.
https://www.goodreads.com/
I can't find how to build one in CSS. I've tried to copy the image, that doesn't work. Does anyone else know how to build a goodreads tag?
you can download a goodreads svg at Goodreads, open the file in your editor, copy the content and put it where you need it in your HTML file.
On goodreads.com, copy the image address and paste in into a new tab. If the new tab contains only the image, copy the image address again and paste it between the src tabs. Otherwise, keep copying the image address from the new pages.
Depends if you want to just put in the logo or make the logo a link to your goodreads account
For just the image you could use
<html>
<head>
<!--Put your metadata and link css here-->
</head>
<body>
<img src="https://i.stack.imgur.com/g0KBL.png" alt="Goodreads">
</body>
</html>
And for a social media link I recomend using a icons library like FontAwesome
<html>
<head>
<script src="https://kit.fontawesome.com/393a279287.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="fa fa-goodreads"></div>
</body>
</html>
Anyways good luck!

How do I get my stylesheet to connect to my html file?

I'm currently working on a project for school, and I was wondering why my stylesheet isn't linking to my HTML file, I've tried rewriting it, putting it in different places, and still nothing! Here's the code if needed
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
<link type="text/css" rel="stylesheet" href="css/stylesheet.css"/>
</head>
<body>
<h1>About Me</h1>
<p>Hello everyone and welcome to my little website!</p>
<p>You can just call me Golden Rose<p>
<p>I play/watch and review games, movies, and tv shows (especially horror).</p>
</body>
</html>
body {
font-family: sans-serif;
}
If you can ensure the file location is correct, you may need to do a browser refresh. This can be done in Chrome by pressing control and f5 at the same time. This will clear all cache and force the stylesheet to load.

My HTML file won't link to other HTML files or CSS

I am using Sublime text to write some HTML and CSS files. I've created my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>RainyDayBakes</title>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="text-align:center">RainyDayBakes</h1>
<nav style="text-align:center">
<a href=”C:\Users\sarah\Documents\Simmons\CS-321\page1.html”> About </a>
<a href=”page2.html”> Menu </a>
<a href=”page3.html”> Gallery </a>
<a href=”page4.html”> Order </a>
<a href=”page5.html”> Contact Us </a>
</nav>
<img src="cake.png" alt="oreo crumble cake" class="center">
<h3>Welcome to RainyDayBakes!</h3>
<p>We are a local bakery specializing in creative cakes, cupcakes and cookies!</p>
<p>In addition to being open daily we also offer custom ordered confections.</p>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
<footer>
</footer>
</html>
my page1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>This is Page One </title>
</head>
<body>
</body>
<footer>
</footer>
</html>
and my style.css:
<style>
h1 {
color:red;
}
</style>
When I try to run index.html in Chrome, the link to page1.html says it doesn't exist, and the CSS won't show up. They're all in the same folder, I've saved all the files, and I'm running on Chrome. Every other solution I've found refers to making a typo, the directories being different, etc. but as said, they're all in the same folder, and I haven't noticed a typo (but it's entirely possible when you're too close to your code).
First off, you're not even using the tag anywhere in your code, so that's why the style isn't showing up. Secondly, if they are in the same folder, just link your about page to page1.html; not the full directory listings.
You are using typographical quotes in your links' href attributes, which won't work. Change those to regular quotes.
Let the link be this way instead href=”page1.html”
You might want to put a link to your CSS file on all your pages, I don't see it on your page1.html You probably already know about this resource but I mention it just in case you don't: W3 Schools is very handy for a quick reference to a lot of HTML/CSS questions.
So you have two issues:
For page1.html, would suggest adding file:// or file:/// to the beginning of the href element, or maybe retyping the line since the other links worked
For your CSS, remove the tag, it's for when you put the style inside the HTML file(embedded)
This isn't an issue with your code. I was having the same exact problem too and i recently discovered that the problem likely lies in the IDE that you're using. I was using stackblitz and recived the same output. But when i switched to an online compiler and litteraly copy & pasted the code with the same file names, the code started working correctly. Try using an online compiler and see how that works out for you. It worked for me.
The compiler I used is:
https://www.onlinegdb.com/
make sure to switch the languate to HTML using the language dropdown on the top right corner.

HTML transfer to Filezilla (images won't show)

"This won't transfer to the FileZilla correctly from Notepad++ the images won't show? I asked the teacher for help, but he doesn't know the material well enough to trouble shoot the problem. Internet Explorer will run the module and the text runs just fine, but Google Chrome say Error 2, and FileZilla won't register the pictures, they only show as black box icons, pls help"
<html>
<head>
<img src="images/images12.jpg" style="padding:6px" align="center" height="400px" width="400px">
<style>
#this is the set up for the text body {
font-family: Papyrus, fantsy;
text-align: center;
}
h1 {
font-family: Papyrus, fantsy;
text-align: center;
}
h2 {
font-family: Papyrus, fantsy;
text-align: center;
}
</style>
header for the home page
<title> Woody's Wondering's</title>
<header>
<h1>Which way did Woody Go?</h1>
</header>
<nav>
<b>
Home
Places To Go
Whats Free
<br>
<br>
Kids....Cheap easy Fun!
<br>
Adults Only
</b>
</nav>
<main>
<h2>You Next Adventure is only a click away!!!</h2>
<p>Welcome to Woody's Wonderings were everything is cheep and easy to find in Ohio.....How Cheap, well pracically 20 dollars to free. </p>
<h2>Meeting all your fun fun needs!!!</h2>
<p>Keeping the site updated with new and improved places & Events year around
</p>
</main>
<footer>
<small><i>
Jessica Harper</i></small>
</footer>
</body>
</html>
Your image is in the head of the html document. Correct structure for html is,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Template</title>
<!–– Style sheets & other importations go here ––>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!–– Your content goes here ––>
<!–– Javascript files go here ––>
<script src="js/scripts.js"></script>
</body>
</html>
From w3schools,
The element is a container for metadata (data about data) and
is placed between the tag and the tag.
HTML metadata is data about the HTML document. Metadata is not
displayed.
Metadata typically define the document title, character set, styles,
links, scripts, and other meta information.
But I tested myself, and the images do work if the image exists in the path. Please check the image exists in the location you have in the img tag.
I am assuming you have uploaded the images along with the html file. If not please upload the images through filezilla to the correct location.
The best way to find what is the issue is to check the browser console. You may find an error saying no image found in path/to/your/image and that is where you have to put your image!
Your HTML is malformed and does not have an opening <body> tag, which could be causing some issues. I'd recommend using the W3C HTML Validator to validate your code.
Errors like this are easier to visually spot if you use some sort of code-formatting/"pretty-print" tool (I like this one).
Notepad++ probably has a plugin for this as well.

css and html are not linking

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Basics</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>JavaScript Basics</h1>
</div>
</body>
</html>
h1{
color: green;
}
Here are both my HTML and CSS. I am using the ATOM text editor on my Mac. Whenever I preview HTML it shows JavaScript Basics in the default black color,not in green from my css.
Try this one dude!
`<link href='style.css' rel='stylesheet' type='text/css'>
The problem is a caching issue. CSS can be a little strange with caching, and while the classic combination CTRL + F5 works for images, it doesn't work for CSS. The better solution to dealing with caching in CSS is to hold down SHIFT while clicking on the refresh symbol.
Obviously, you can include a backslash in the filepath for the CSS reference, or append a version number, such as: <link rel="stylesheet" type="text/css" href="style.css?v2 />.
This version number doesn't 'mean' anything inherently, but can be useful for denoting updates to the CSS, and importantly will be considered a different file by the browser (forcing it to re-load the CSS).
If you have access to a back-end language like PHP, you can also force the browser to refresh the CSS automatically every time the page is loaded with PHP, by appending a timestamp within the link to the CSS file, with something like:
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
Keep in mind that CSS can be 'costly', so once you have finished development, you probably want to allow visitors to cache by removing the timestamp in a production environment :)
Hope this helps! :)