
|
Welcome to the computer room
|
The computer room is for my current coding hyperfixations. I used to work with python, I tried learning LUA, but currently (as I'm sure you can guess) I love using HTML! Below I have a cheat sheet of sorts for HTML code language (keep in mind it won't be that good because code languages are complex - this is just to help, not teach). Remember to close off tags and indent them where necessary. Enjoy!
|

|
Tag:
| Function:
| Attributes:
|
b
| Bolds text
|
|
u
| Underlines text
|
|
i
| Text in italics
|
|
img src="_"
| (inserts an image or gif)
|
- Src - the source of your image is inserted where the underscore is. This can be a link or a file.
- Align - the image can be aligned to the left, right, or center. To do this, type "align=___" after the quotes for the source.
- Height/width - the height, width, or both, of the image can be changed. Using this is similar to the align attribute, except instead of align, you would type height or width. After the = sign, you can type the number correlating to the size you would like the image to be. You can use percentages or just type "px" after the chosen number.
|
body
| Adds stuff to the body of the page (I'm typing this in the body of the page now)
|
- The body tag has many attributes, so I won't go through them all. But if you want something to be visible on your page, for example a table, an image, some text, a background colour or image, whatever; you put it in the body tag.
|
head
| Adds stuff to the head of the page
|
- Like the body tag, the head tag has many attributes. It mainly changes the less noticeable parts of your page.
- Title - changes the title of your page; the title of this page is "The computer room", and can be seen in your browser tabs.
- Style - changes how your page looks. The style tag is complex so it will get its own table row.
|
a href="_"
| Inserts a link
|
- Whatever you're linking goes inside the quotes - this can be an external link or a file.
- The object that is clicked to follow the link goes inside the tag. This is usually either text or images.
- Style - changes how your page looks. The style tag is complex so it will get its own table row.
|
br
| Inserts a line break
|
|
ol
| 1. Defines an ordered list
|
- The li tag is used to add items to the list and is inserted within the ol tag.
|
ul
| - Defines an unordered list
|
- The li tag is used to add items to the list and is inserted within the ul tag.
|
li
| - Defines an item on a list
|
- The li tag inserts list items within ul and ol tags.
- Type - changes the type of list item. To do this, type "type=_" after li but still within the li tag. After the = sign, define what list you would like. For example, I'm using the "square" list type, which lists each item with a square bullet.
|
p
| Defines a paragraph
|
|
table
| Inserts a table
|
- tr - inserts a table row (vertical). This is used within the table tag.
- td - inserts table data (horizontal). This is used within the tr tag.
- Border - changes the border on a table or td.
|
tr
| Inserts a table row
|
- td - inserts table data (horizontal). This is used within the tr tag.
|
td
| Inserts table data
|
- Border - changes the border of the td.
- Colspan - determines how many columns the td spans over.
- Rowspan - determines how many rows the td spans over.
|
border
| Changes the border of an object (usually used for tables, images, or videos)
|
- Color - changes the colour of the border. To use this, type "color=_" after the border attribute. The colour is typed after the = sign - this can be done with HTML/CSS colours, hex codes, or rgb codes.
- px - changes the size of the border. To use this, type "_px" after the border attribute. The size can be changed by putting the corresponding number before the "px".
- The type of border used can be changed with a style tag.
|
h_
| Defines a heading
|
- The size of the heading can be changed by typing a number where the _ is. The higher the number, the smaller the heading. For example, to the left I have used a h1 tag.
|
form
|
|
- label - assigns a label. The label tag is typed within the form tag as "label for"_"".
- input - determines the input type. To use this, type "input type="_" id="_" name="_" value="_". There are multiple types of input - in the example to the left I have used a radio form of input, so I typed "radio" after "type=". The id and value parts assign ids and values to the input. The name assigns a name to the input. I'm not very good at explaining forms lol.
|
style
| Inserts internal CSS for individual page styling. Inserted in the head tag.
|
- I use style tags to make all my pages look different! You use it to style whole attributes rather than individually typing different properties for them. For example, all text on this page has a green colour because I have set all text to be green. Without the style tag, after each piece of text I would have to individually define it to be green.
- The style tag has many attributes, but it is mainly used to change how different attributes/tags on the page look.
- Once you have defined how you would like a tag or attribute to look, type "class="_"" after the tag/attribute. Within the quotes type the name of your style.
- The style tag is very hard to explain - I would reccomend looking it up and learning it if you haven't heard of it.
|
style
| Inserts inline CSS. Inserted within individual tags.
|
- Inline CSS is what I was talking about before - it changes individual aspects rather than whole parts.
- To use this, find a tag and within the tag type "style="_;"" - keep in mind, whatever you type within the quotes must be applicable to the tag. For example, typing "border style="Georgia;"" will not do anything because georgia is a font type, which is not applicable to a border because borders do not contain text.
|
_.css link rel="stylesheet" href="_.css"
| Inserts external CSS for general page styling. Inserted within the head tag.
|
- External CSS is a separate .CSS file for changing the style of a page. The .CSS file contains code that looks like internal CSS, however instead of being written in an individual page it is written in a .CSS file and then linked to a page. This is useful for saving time when styling a page as you only have to write everything once in the CSS file and then link the file to the page.
- The name of the .CSS file is typed where the _ is.
|
div
| Determines a division
|
- The div tag can be styled with the class attribute if internal CSS is used. To do this, type "class=""" after the div but still within the div tag. Type the name of the style within the quotes. For example, I have styled the div to the left to have pink text.
|

|