HTML can see pretty daunting for someone to start learning with no prior coding experience, but out of all the languages, HTML is imo the most straightforward and easy to learn. I took web design and HTML courses about 8sih yrs ago now and have been self teaching myself more advanced HTML coding.
In this overview I'm going to go over the basics of HTML for we building! I'll be using Neocities as it is free and accessible, but this also applies to self hosting.
First things first, lets make a Neocities account and create a new file
make sure you have .html at the end of your files name. This will show up in the URL the site title we can edit later.
You will be greeted with this:
The purple is notes, you can create a note by adding !-- after your < and -- before the closing carrot.
A HTML document has a few main parts, the Head, the Body, and Styles
The Head is where Styles are held to be referred to in the Body as classes.
The Body is where you call classes and add your text and images.
You can change the title of your document here!
This is your style sheet, its exactly what it sounds like it is! A sheet with all your basic assets, fonts, and colors.
Lets clean up the body and get started, keep some space in the body as to not get confused with clutter and add notes when you need them.
Lets start with a basic background, I will be using assets from
Glitter Graphics but you can use your own hosted images, like on catbox or imgur.
Glitter graphics kindly provides us with the code, you can change the URL to your own easily.
we're going to put this in the Head, as its a Style tag
I'll go over a image that Covers the background in the second tutorial, as it can be tricky to get it to work with other elements.
now lets add a welcoming message to our site!
Simply go into the body and write text.
to center the text, use the Center tag (you can also use Left or Right) to change the color of your font use the Font tag with color="x"
Make sure you work your tags in order on both sides.
it should look like this:
that text is pretty small... lets make it easier to read.
you can put multiple classes in one tag, like here, both size and font are in the font tag.
That looks a lot better
why don't we make it a Header, headers can easily be combined with classes to call for things like borders and background changes.
Headers are bolded and distinct from typical text.
you can also make regular text bold with <b or <strong
you can also do italics with <i
why don't we add an image to our site, ill be using a graphic from
! simply copy your images link... and place it in a Img src="your url"
Your image will now appear under your header!
lets center the image, you can do it in two ways.
either way your image will now appear like so:
lets create a paragraph below your header to explain what your site is about.
you can change the size and color to be whatever you want!
your text should appear below, make sure to put it inside the Center tag!
you could also you <br instead of <p to separate text blocks
lets add a couple of links to other sites we like, or to credit assets used! doing this helps others on indie web get discovered! so make sure you link a few of your fave sites!
you can add multiple links in one paragraph, using the <a tag
Like so, notice how I put two sites in, and between the tags you add the descriptor you want to actually appear as your link.
Like this!
Maybe we want our welcome text to pop out a bit more, you can section off text types with a Class you define in the Head of the document.
We are going to create a Style, make sure you put it in the head!
p.one is defining our p tags ability to use a class, the class is named one!
This class will give our paragraph a Dotted border.
h1 is now defined to appear with a white background, now our site will look like this.
But there's no border, that's because we have to call for it in a class.
Now a border should show up
Lets change the name of the class, as "one" is ambiguous and may get confusing with multiple classes to call from. Make sure you rename it everywhere it is used!
And now those are the basics!
I'll go over embeds, resizing images, and layering in tutorial two. If you have questions you can comment here!
Here is the
Tutorial site! check for updates and sneak peaks if u want :p
and here is the
raw code to check out! Happy web building!
Report Blog Entry
Comments
Displaying 1 of 1 comments ( View all | Add Comment )
Ssssstudent
I think the images disappeared?
the place i host my images is having issues sigh, i gotta edit and host em elsewhere
by xX_Dyrk_Nyte_Xx; ; Report
edited the blog so images should work again! :3 hopefully they stay
by xX_Dyrk_Nyte_Xx; ; Report