You've never touched HTML before?
That's okay! If you are completely new to HTML, here are the super basics to get you started:
0. HTML!
<this is a tag>
the stuff that you want affected by that HTML element, goes here.
Then you close the tag like this:
</this is a tag>
1. HTML Skeleton 🦴
The absolute barebones skeleton of a site:
<html>
<head>
</head>
<body>
</body>
</html>
Within <body></body>, you'll have your content.
For example:
<p>Each text paragraph goes in a tag like this </p>
2. Very basic styling
2.1 Text:
Bold: <b> Bold: </b>
Italic: <i>Italic:</i>
Underline: <u>Underline:</u>
Strikethrough: <s>Strikethrough:</s>
Split text onto the next line <br>
like this.
<p>But remember to use these</p>
<p>to space lines like this</p>
2.2 Headers:
This is h1
<h1> This is h1 </h1>
This is h2
<h2> This is h2 </h2>
This is h3
<h3> This is h1 </h3>
2.3 So far:
<html>
<head>
</head>
<body>
<h1>Title!</h1>
<p>
<b>Here</b> is where you can put your content.
</p>
<p>
Another paragraph!
</p>
</body>
</html>
Got that? Alright, let's move on!
3. Images
To make a link, find the URL of the image, and insert it between the quotation marks:
<img src="URL_OF_IMAGE.JPG">
You can also change the size of the image:
<img src="URL_OF_IMAGE.JPG" width="500">
You should also include an alt tag. If someone is using a screenreader, or if the link is broken, or their internet is slow, the alt text will tell them what the picture is supposed to be:
<img src="URL_OF_IMAGE.JPG" width="500" alt="An image of a thing">
Use this image HTML generator to generate an image HTML + add a caption and change the size, and float next to the text if you want, and see how it changes the HTML.
4. Links
To link to another page or another site:
<a href="http://URL_GOES_HERE.com">Link text goes here</a>
Internal links to other pages don't really need anything beyond that, but if you want the link to open in a new tab instead of taking over the tab your site is in, add a target:
<a href="http://URL_GOES_HERE.com" target="_blank">Link text goes here</a>
Here is a Link Generator to use to get a feel for links and link options.
4. CSS Styling
Css can be placed 2 ways:
-
if you only want the styles to apply to one page, you will put the css code in <style></style> tags
- (which goes inside the <head></head> tags)
-
if you want to use that styling on multiple pages, then y ou should put the code in a separate file
- called "style.css" (or whatever.css)
- you do
4.1 Stylesheet
If you are going to use the same styling on multiple pages:
- make a style.css file.
- Do NOT include the <style></style>tags in the file because the computer already knows it's style stuff from the ".css"
- then put the following in your <head></head> section:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>...
4.2 <style></style>
So, the top of your HTML page should look like the ^above^, OR the following:
<html>
<head>
<style>
(The css code that you only need for this 1 page)
</style>
</head>
<body>...
5. CSS code
5.1 Text colors
Use this font css generator to practice changing the font's style.
Add the resulting css code to either the <style> </style> OR your separate style.css page. You can delete the bits you don't need
{
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 18px;
letter-spacing: 2px;
word-spacing: 2px;
color: #D662FF;
font-weight: 700;
text-decoration: none;
font-style: italic;
font-variant: normal;
text-transform: none;
}
--->
{
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 18px;
color: #D662FF;
font-style: italic;
}
4.2 Background Colors:
Now, do the same with the CSS Background Generator!
Got all that? If so, you can move on to Website Resources!!