Firstly, I'd like to welcome you to the world of web development - I know you're gonna love it
Imagine the web were a canvas, bare and boring, and the paint is HTML + CSS. This page should get you
set for making your first website! how exciting
To start writing a website, you're gonna need a text editor. Literally anything will do, but I recommend
using one with colour coding and automatic indentation, since it will make it easier to read and understand
your code. Right now, I'm using Visual Studio Code, but you can use something as basic as Notepad
if you really want to -- literally just use anything to type your code up, and then save it as a .html file
You should call your homepage index.html. This will make it your default homepage. From there, you can made the pages
whatever.
As for hosting, you can either e-mail me all your files and I will host them under this domain, or you can figure out your
own hosting. Neocities is an extremely simple way to get your site onto the web.
HTML code is made up of tags. You can think of these as labels which tell the web browser what we want to be shown.
<html>
<head>
This is inside the HEAD tag
</head>
<body>
This is inside the BODY tag
</body>
</html>
First of all, please notice how the tags are set out. The name of the tag is between
a set of less-than and greater-than signs. You will also notice that they come in pairs.
To close a tag, simply take the tag and put a '/' before the name.
We begin by passing the <html> tag. By starting with the <html> tag, we tell the
browser that what it's about to read is HTML code, and to understand it as such. Everything we want to
tell the browser must be within these tags.
Let's take a look at what we put inside the <html> tag...
This tag is going to contain all the things not displayed in the main browser window, like the title of a page shown in the
tabs bar.
Titles
Without even knowing HTML, you could probably tell me what we would call the tag that holds the title... <title>.
And here's the <title> tag for this page:
<title>HTML 101</title>
The <body> tag contains what's shown on your webpage. Please read on for the basics of how to display text and links.
Displaying Text
To display text, you would use the <p> tag.
<p> Hello World! </p>
There are a variety of ways you can change the style of your text, such as make it bold, underlined, italic, subscripted, superscript, highlighted orText Styles | HTML tag |
---|---|
Bold | <b> |
Underlined | <u> |
Italic | <i> |
Subscript | <sub> |
Superscript | <sup> |
Highlighted | <mark> |
Crossed Out | <del> |
<b>This text is bold</b>
<u>This text is underlined</u>
<i>This text is italic</i>
<h1>How do I make my own sites?</h1>
<a href="website.com">Website</a>
<img src="your_image.jpg">
src="" is what you need to use to tell the browser where the image is.<img src="your_image.jpg" height="500px" width="500px">
You can play around with the size of your image in pixels (px) or in percentages (%). The percentages are relative to the size of the window - it you set the width to 100%, it will span across the whole page.