so like. hi. this is basically going to be my little notepad for computer class. i'll also be adding things that i found out while learning & experimenting on my own.
not every piece of information here is necessary for school, but if you want to keep the information as any future reference then go ahead ^_^
all dates here are by MM/DD/YY. this site will also update over time.
feel free to inquire me for any questions too!
reference i use
To view site directory: click here!
HTML - HyperText Markup Language
current application used for .html coding: notepad
to change a .txt file to .html:
(in notepad)
file -> save as -> name the document "any-title-you-want.html" -> set file type to "all files"
<html>
<head>
<title>site title</title>
</head>
<body>
insert site body here
</body>
</html>
<head> - used to define the head tag of the document/site
<title> - site name
<body> - content of the website
there are six (6) header tags:
<h1> is the biggest header
<h6> is the smallest header
the headers are not affected by paragraph formatting <p> or bold formatting <b> (to be covered later)
samples:
Note: DO NOT use this to bold text in a paragraph. These are HEADERS. Bolding text in paragraphs will be covered later.
paragraphs are for bigger blocks of text. <p> the following are ways to format them:.
<b> - bolded
<i> - italicized
<u> - underline
an example on using formatting is this:
<p><b>sample text!</b></p>
the output would come out as something like this:
sample text!
you are allowed to use more than one formatting option in a paragraph. you can also place them in-between sentences.
for example:
<p>some text without formatting. <b><u>some text with bold and underline!</b></u> even more text without formatting</p>
the result would end up like this:
some text without formatting. some text with bold and underline! even more text without formatting
these slashes indicate the ending tags of the element. it marks the end of any sort of formatting/element. this is to prevent any error that may occur in the site. some of the elements are self-closing, but for now, it's better to close the elements.
for example, if you just keep the <title> element open and not close it, it may cause errors for any future code that will be inputted in.
same applies for any formatting/headers you decide to do/use.
- header
- footer
- navigation menu/side bar
- content
- feature image
input: code/concept
output: website/result
code: <a href="syntax">text to hyperlink</a>
syntax: the desired website URL (ex. https://schoology.com)
code: <img src="image.filetype" style="width:0px;height:0px">
src : image source
style : dimensions of the image
replace the "image.filetype" with any image + filetype within the same folder as the .html document.it's advisable to create separate folders for your websites!
+ the style option for images requires pixel dimensions
code: <br>
this type of code breaks a line, think of it as using the enter button to break lines in text!
even if you break the text in the code, it will not affect the output text unless you add the linebreak.
this type of code does not require an end tag.
code: <p style="color:colorname;">text to color</p>
this style option also works with headers. an example:
<h1 style="color:colorname;">text to color</h1>
code: <hr>
this adds a horizontal line to the website.
in the body element, insert this: style="background-color:value;"
like this: <body style=background-color:value;">
in the value placeholder, that's where you put the color value you want.
there are THREE (3) ways to input a color value for the website.
- HEXIDECIMAL/HEX CODES (e.g. #8ACE00)
- RGB VALUES (e.g. rgb(138,206,0))
- HTML COLOR NAMES (e.g. greenyellow)
A good website to get hex codes and RGB values is here. (htmlcolorcodes.com)
For color names, you may also refer to the same site's Color Name list.
NOTE: It is important to include the hashtag (#) when inputting hexidecimals, the rgb indicator for RGB values, and not to misspell color names
+ no spaces (for example, you type "yellowgreen" instead of "yellow green"). HTML is particular with spelling and spacing!
They go by a property:value; format. example: style="color:blue;"
in the example given, the property is the color, and the value is blue.
it is possible to have more than one property-value pair in an element. example: style="color:blue;font-size:23px;"
to place them in an element, you must have a tag for it. style is an example of a tag.
This property belongs to the style tag.
example: <p style="font-size:24px;">This text is 24px! Cool, right?</p>
the outcome text size would appear as this:
This text is 24px! Cool, right?
Font sizes use px.
It is worth taking note that the default text size for paragraphs is 16px.
even with the advantage of changing text size, it is still important to utilize the elements for its purpose.
This property belongs to the style tag.
this makes use of font names. you can use spaces for some font names, like Times New Roman.
example: <p style="font-family:papyrus">This text is using the "Papyrus" font! Pretty ugly, right...</p>
the outcome text would appear similarly to this:
This text is using the "Papyrus" font! Pretty ugly, right...
changing fonts may also work with headers.
you may use this site as a reference for web-safe fonts to use.
This property belongs to the style tag.
there's three kinds: left, right, and center.
example syntax: <p style="text-align:left/right/center;">This is formatted text.</p>
The different outcomes:
This is formatted text. (left)
This is formatted text. (center)
This is formatted text. (right)