this is like a year old a very outdated. However it don't do a half bad job of explaining the very basics of html and website building if needed
Hyper-Text Markup Language
markup languages dictate the general structure and format of a document. html is designed for websites, and can be used with css and javascript (among other tools) to make fully-featured and professional looking web applications
html works sequentially, it will execute the code starting from the top and going down
where to edit html code
the easiest way to do it is just your operating systems built in text editor (Notepad, TextEdit, Nano), but its not the best place to do so.
there are lots of text editors that are made for programming. here is a few to consider:
Atom
Brackets
Notepad++
Sublime
Vim
Visual Studio Code (Microsoft)
WebStorm (JetBrains)
Zed
almost everyone uses Visual Studio Code (i use it to); its considered the industry standard.
But there are still a lot of professionals how use the other editors, so give them a try (they're all free). Any text editor works as long as is it can open a .html file as text
˜”*°•.˜”*°• BASICS •°*”˜.•°*”˜
simple stuff to get your feet off the ground
where to start
doctype represents the document type and makes it easier for browsers to display the website
html specifies we are writing in html (will need an end tag at the very end) and
lang=en lets web browsers know this is an english site. if you are not writing your site in english, you can use this table to find the code for your language
next is the head
the head contains all the meta info about the site (not displayed on the site. well get to
it later)
the title is the text appearing on the browsers title bar and
the first link adds a favicon (little image to the left of the page title). don't forget to specify the format
of
the image in the type attribute
the second link connects the html file to a css file for furthering styling (we will talk about css later)
body
the body is everything visibly displayed on the site.
you can also add style attributes (more details later) like background color or background image
paragraphs
This is a paragraph.
puts text on your website! paragraphs also have a margin below and above it, whose size can be edited with
css you can also use <br> to break the line within the paragraph
headings
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
headings are basically paragraphs, but with bold and text size built in
lists
item one
item two
item three
formats lists "ol" stands for ordered list, but there is also "ul" - unordered list - and "dl" -
Description list
item one
item two
item three
item one
this is the first item
item two
this is the second item
item three
this is the third item
Comments
comments will not be displayed on the website.
they are for the programer to help organize or write notes for other programers also working on the file
Tables
first row, first column
first row, second column
first row, third column
second row, first column
second row, second column
second row, third column
third row, first column
third row, second column
third row, third column
creates a chart, structured by rows <tr>.
<td> defines table data within each row. you are not restricted to only having three of each. you can have
as much as you like
text
text
text
text
text
text
text
text
text
text
˜”*°•.˜”*°• ADVANCED •°*”˜.•°*”˜
not too hard, but a step up
Block and Inline Elements
html has two main types of elements:
block elements
block-level elements start on a line, are given margins and stretch to the full width available.
block elements can contain inline elements.
the most used are <p> and <div> (div is like a container). here are some others:
<address>
<article>
<dt>
<figure>
<footer>
<header>
<main>
<nav>
<section>
<table>
etc...
inline elements
inline elements do not start on new lines and only take the space they need.
they can not contain block elements (they go in them).
the most used is usually <span> (container for inline elements, like div). here are some others:
<a>
<big>
<cite>
<dfn>
<img>
<input>
<map>
<object>
<script>
<var>
etc...
Inline Text Attributes
bold text italics text strike-through text subscript text superscript text
adds text formatting that can be added within (inline) another element.
It dose not make a new line and only takes as much space as necessary
if all the text is gonna be the same, you don't need to add <p>
there is also custom attributes that can be defined with css.
but without css, they default to this:
strong
big
em
dfn
var
mark
ins
del
small
kbdcodesamptype
you can use the "target" attribute to specify where you want the document to be opened:
"_self" is used by default, and it opens the document in the same tab it was clicked,
"_blank" opens the document in a new window,
"_parent" open the document in the parent frame (talk about later) and
"_top" opens the document in the top level of all the frame sets (talk about later)
the img tag is used for displaying images on your webpage.
the tag itself holds no value, hence the lack of an end tag.
images contain two main attributes: "src" and "alt": "src" contains the url to the webpage (url could be from
different a server, but usually from the same sever that hosts the website)
if its in a folder, include the folder name
"alt" contains text that is displayed instead of the image if it fails to load
you can specify the weight and height either using a style tag or separate weight and height attributes
(measured
in pixels)
the picture element can store multiple images,but only displays one.
to display an image based on the screen size and if the browser does't support an image type
example for image size (same works with audio and video)
example for image type
marquee
marquee is scrolling text
there is a lot of attributes that can be added to marquee. like direction
you can add width and height to make boundaries. behavior could be used to make the text bounce back and
fourth;
behavior="alternate." scroll delay adds a stutter effect to the scroll (only works if its over like 60)
Styles
background color
text color
fonts
text size
text alignment
border color and width
everything
styles can be added within an element to change its appearance.
style is just css. you can get crazy with css, and we'll go crazy later, but here is some simple stuff to get you
started. also, note that color (for all of html) is picked with hexadecimal codes, RGB codes, HSL codes or one of
the
140 color names
style info can also be stored in the head
html has no fonts built in. your web browser will usually provide three fonts for you to use (a serif font, a
sans-serif
font and a monospace font). what specific fonts you have depends on your browser and your operating system - refer to this
site. to add custom fonts, the simplest way is to use fonts.google.com. find a font you like from there how add it in the head
with link
background images can be added with style
TEXT
text on
image
TEXT
text on image
TEXT
text on image
TEXT
text on
image
TEXT
text on image
TEXT
text on image
TEXT
text on
image
TEXT
text on image
TEXT
text on image
you can add attributes pertaining to the background image
repeat and size are exactly what you think they are (repeats the image if you run out of space on the
image;
adjust the length and width of the image).
attachment is about whether the background image scrolls with the rest of the page or not
values for attachment
Value
Description
scroll
the background image will scroll with the page. This is default
fixed
The background image will not scroll with the page
local
The background image will scroll with the element's contents
initial
Sets this property to its default value
inherit
inherits this property from its parent element
Iframes
iframes display a website within a website!
<iframe src="url"></iframe>
most websites use something called "x-frame" to not allow other websites to use it as a iframe (to prevent
clickjacking).
there is not many sites that allow it, but here are some i could find:
as you can probably guess from their ui, these are not the normal versions of each site.
these are special subdirectories made to be embedded on other sites. These are setup on their respective
website
(for example, on spotify's desktop site, you can go to the options on a song --> share --> embed track,
which will
bring up a ui to make an iframe for your site)
you can specify height and width (same way as images) as well as border (with style. having a border is
default.
you need to write border:none; to get rid of it)
you can make a link appear in an iframe using the name attribute. you write the name of the iframe in its
syntax,
and then use that name as a target in a hyperlink
Meta Tag
meta data is not displayed on websites
the meta data used with the meta tag is for information for the browser to help display everything correctly
"charset" defines the character set your using (if you don't specify, its automatically UTF-8).
Character sets are lists of every number, letter and symbol you can use. UTF-8 covers almost every character in
the world. I would only change it if your website is intended for old computers that don't support UTF-8, or you
are primarily typing with characters from an asian or african language, which are not optimized well on UTF-8
keywords are search terms for web browsers to use for looking for your website
for example, if your website is for your legal practice, you would want keywords of law, attorney, etc
specifies who made/maintains the website
viewpoint allows for your website to scale with the screen size of the user
Semantics
semantic tags are basically tags that already exist renamed for organization.
for example, <section> is functionally the same as <div>. it is only named section to help the
developer organize
and the web browser display correctly
other examples are header, nav, figure, caption, form, article, aside and footer. again, they all work the same
as div,
but are used to organize sections. its recommended to use them this way:
Etiquette
like in real life, coding also has manners to abide by and like real life, you don't have to follow them (i
don't follow them all) but if you want your code to be tidy, clean and not make pedantic people mad, you should
follow them (there is no downside after all)
DISCLAIMER, some of these are done automatically with a formatter, so get one
closing elements
you technically don't have to close all elements in html
is valid html code. but it is strongly recommended that you close them for organization
lowercase
html lets you use both uppercase and lowercase for elements and attributes
but developers always use lowercase because its easier to type and looks cleaner
quote values
html lets you attribute values without quotes
but developers use quotes out of habit since they are needed for values with spaces
images
you don't have to add alt, width and height attributes for images
but, they add clarity if it doesn't load, and reduces flickering while loading by reducing space
equal signs
you might assume its good to add spaces around equal signs
but developers prefer no spaces for easy reading
blank lines and indentation
if you really wanted, you could organize your code as one big block
but developers use spaces and indents to help organize their code
there is no best way to use spaces and indents; different developers use them differently. nowadays, most
developers have a code formatter that will do all this automatically. i use Prettier, which formats everything
when saved. i actually wanted the first example to be messier, but Prettier wouldn't let me
omitting head, body and/or html
if you forgot to use the body, head or html tag, the browser will add it in for you. but you should still use
it anyways to organize and give the browser less work
miscellaneous
a bunch of things worth mentioning but aren't big enough to warrant they're own section
bi-directional override
the <bdo> over rules the current text direction and lets you set your own. this is mainly used to reverse
text or to help format languages written right to left like arabic or hebrew
this text will go left to right
this text will go right to left
the <bdi> tag (bi-directional isolation) is for formatting text in a different direction then the text
around it, like if you were writing arabic in a english paragraph
a tree starts with a seed (أول الشجرة بذرة) is a common arabic proverb
details and summary
details adds a widget that can open and close additional elements
this the summary
you can put whatever you want here
dialogue
the dialog tag makes a box that floats above all other elements. it must be open in order to be seen. this looks useless but it is extremely useful for making pop-ups with javascript
paragraph text. nothing to see here
paragraph text. nothing to see here
paragraph text. nothing to see here
paragraph text. nothing to see here
entities
some characters are reserved in html. if your try to use < or >, your browser might confuse them for tags
and not display properly. for this we use entities. you can use a entity name or number to display these
instead.
entities names look like this &entity_name; and entity numbers look like this
&#entity_number;. here are some of the most common:
ruby can add small annotations above the main text, primarily for indicating pronunciation or meaning. ruby
defines the main text and rt defines the annotation
this is the main text
scripting
the script tag adds embedded client side javascript. incase the user has javascript blocked (pretty common),
there is the noscript element that displays instead. javascript is the programming language of the web and is
used
to add code and applications to websites.
<script>
document.write("this was written in javascript!")
</script>
<noscript>your browser does not support javascript!</noscript>
template
the template is a container that is hidden until displayed by a javascript function I would show you an
example but i don't know enough about javascript to make an example or get one to work. trust me that its a div
but hidden that you can display with script
title attribute
the title attribute adds a tooltip to the text. a tool tip is a little text box that
will appear after hovering
over it for a bit
this text has a tooltip
<wbr>
<wbr> defines an optional line break. <br> will break the line, but <wbr> will break if word
wrap thinks a word is too long and makes an awkward break
˜”*°•.˜”*°• FORMS •°*”˜.•°*”˜
collect data from the user! (this is barley complicated enough to have its own
section)
form elements
form is a container for different types of form elements. some of the more important elements we will go into
detail with later, but here is roughly everything you need to know about each
input
input allows the user to input data, with different types of input. Its the most used forum element and we will
go in to detail about it later.
label
labels are for screen readers to read out the content of multiple form elements. the for attribute should be
the
same as the id of the form element to attach them together
Selection
select makes a drop down list from the user can select their input
if you want an option to be pre-selected, add the selected value to the option
Text Area
text area is like the text input type but you got to define the area with rows and columns
Datalist
datalist sets up a predefined list for inputs. the id of a datalist would be the list value of the input
input
the primary method of receiving data from the user is with the input tag.
input tags are are made up of three elements: type, name and id. type defines what type of input it is and how
it
can be inputted, name defines what the inputted value is called and id is for referring back to a label tag
(take
about later). there is also the value attribute, who changes function depending on the type but is usually the
default value inputted if nothing is inputted.
the password type is the same as text but the type field is masked with asterisks (for passwords and text,
value
defines the default value)
buttons let you execute javascript with the onclick attribute (value defines text on the button)
the submit type is a button that sends all the user submitted data in a form to a form handler. the location of
the form handler is defined in the action attribute
the image type also acts as a submit button but with an image instead
there is also the reset type, a button that will reset all form values back to their defaults
the hidden input actually isn't an input at all. its to put other values to be submitted with the submit button
Radio buttons are used for selecting one thing from a group of things (name must be the same)
a
b
c
d
if you want to be able to select more then one boxes, you use check boxes
a
b
c
d
input type "color" adds a color picker
"date" is a date picker. you can also add max and mins to make restrictions
"datetime-local" adds time to the input
"time" is only time input
"range" adds a number input where the exact value isn't to important (slider). default range is 1-100, but that
can be adjusted with min and max. there is also "step" which changes the intervals the numbers go by (step="2"
would make all the numbers even)
"file" opens the users default file manger to choose a file to input
all the rest of the types are text fields for specific things to be entered in. You may assume that they are
like
semantic form elements. But no. if you don't enter what the field is defined as it won't go through
Input type
Contains
<input type="email">
Email Address
<input type="tel">
Telephone Number
<input type="url">
Website Address
<input type="week">
a Week and a Year
<input type="month">
a Month and a Year
<input type="number">
Numbers
<input type="search">
used for search fields
input attribute
the "readonly" attribute to make an input field uneditable
the "disabled" attribute dose the same while also making it un-clickable
the "required" attribute makes the user unable to submit unless its filled out
the "size" attribute specifies the length of the text input area (size is 20 by default)
the "maxlength" attribute adds a character limit for the input field
as mentioned before you can use min and max attributes on inputs regarding time or number to add limits
for file and email input types, you can use the "multiple" attribute to allow the user to make multiple inputs
the "autofocus" attribute will put the curser into the field when you open the page
