FUN WITH HTML AND CSS

Ever seen interesting things on NeoCities/other personal sites but can't figure out how to do them? Looking for tutorials but can't find much between 'here's how to do a link' and 'professional webdev stuff'?

If I could time travel, this is a little taster I would give myself so I could quickly get into some mid-level HTML/CSS fun. My hope is that this will show aspiring newbies what they can do with their personal website or something you can show friends to help them get a handle on personal web development.

Topics:

• Links Within the Same Page
• Custom Fonts
• DIV Refresher
• Position, Z-Index or Layering Items

Links Within the Same Page

For something simple to start, here is how to make links that when clicked go to another section in a webpage. Handy if you have a large topic and want to break the page up by sub-topics (such as this).

The below code is put into the BODY section.

Code for the link:

So mostly your typical link but instead of a URL as a reference, we use "#" then a word of your choice.

Target Code:

When you click the link, you end up here. You don't need the # and need to use the exact same word as the link for it to work.

Custom Fonts

There are multiple ways to embed custom fonts. I've found this way to be the quickest. But if you have an easier way, please share it!

The Google Fonts directory has plenty of free to use fonts. Once you've selected the fonts you want to use, look to the sidebar.

There are two boxes. The top box has the code you will paste into the head section of your webpage. To keep things simple, I stick with <link> which is preselected. If you use NeoCities, whenever you create a new HTML page it generates some default code. I paste the Google code under the below, which shows up in the HEAD section, so after the META and TITLE tags.

Ex.

But this just pulls the fonts. Now we need to "tell the webpage" where we want to use the fonts and how. The second box in the Google Font sidebar labelled "CSS rules to specify families" has the code you need. If you only picked one font you can just replace "font-family: font;" with what they provide.

Yet if you want to use more custom fonts, you can! Anywhere you can insert and edit the "font-family" you can change to a Google Font. Here are some examples to help get you started.

On this page, I used the Rampart One Font for HEADING 1 and HEADING 2 on this web page. The following code was used in the style section.

You can use this code to edit other blocks like PARAGRAPH and BLOCKQUOTE along with HEADING 3 and 4. Just change the h1/h2 part with what you want to change.

DIV Refresher

If you are proficient in using <div> you can skip this section. I just want to cover some basics before moving to the next section which will reference <div>.

<div> is a way to define or "style" sections of HTML. Many interesting effects can be achieved.

I will show two ways to start with <div>.

The first way, you predefine in the STYLE section then refer to this in the BODY section whenever you want to use <div>. All the black boxes that appear in this page are <div> and I will show the code I used below.

Code for the STYLE section.

Now in the BODY whenever I want to use the above section I use:

The second way is you just put everything in the BODY. The above example was made with the below code. As you can see its a bit messy with all of the STYLE referenced there as well. But if you want have a bunch of different <div> sections, this way can be simplier than having several predefined sections in STYLE that are slightly different and referencing them in the BODY.

Either way you use, you can get into a lot of customization regarding font, border, background color and even background images. I'm not going to go into every aspect that you can customize as there are better references for that but below are some easy to hard things to play around with if you need to get more comfortable with DIV.

• Colors: Color Reference Chart and Coolors which has palettes and you can pull palettes from an image, which can be very useful for designing web layouts.
• Playing around with borders on Quackit
• w3schools CSS Guide

Position, Z-Index or Layering Items

Here is a small example of layering you can do with z-position.

For extensive documentation on position and z-index here are the w3schools documentation. There is a lot you can do with this. Above and below is just a brief example to get ideas going for your personal page.

Here is the code for the butterfly gif that floats over part of a <div> box.

Here I've added some STYLE directly into the image reference. Position and z-index are underlined. Position must be defined in order to use z-index.

I stick with 'absolute' for position as I can define by pixel where I want the image to go.

Left: 915px is the amount of pixels(px) that the image is from the left. Top: 3400px is the amount of pixels(px) that the image is from the top. z-index: 1 is the level the image is at. Everything defaults to zero, even if its not stated. The exception being the background which seem to be about -1.

Below is the code for the date box. The z-index is 1 which puts it above the main box.

Here is the code for the main box. I did not define neither the position nor z-index so it is below the images and DATE box.

Below is the code for the mushroom gif at the bottom right. The position and z-index are underlined.

And this is only the tip of the 'cool things you can do with HTML/CSS' iceberg. I hope this helped or at least inspired some ideas for your personal website.