This is a draft cheat sheet. It is a work in progress and is not finished yet.
Basics
<!DOCTYPE html> |
Must start with this |
<html> |
Start 2 |
<body> |
Visible part starts |
<h1> ... <h6> |
headings |
<p> |
<a> |
links |
<img> |
<buttons> |
<ul> |
bullet (unordered) |
<ol> |
numbered (ordered) |
<li> |
items in <li>st |
Attributes
name= "value" |
basic format |
src |
width/height |
alt |
alternative text to be used, when an image cannot be displayed. |
style |
lang |
<p title="value"> |
All HTML elements can have attributes
Provide additional information about an element
Always specified in the start tag
Single quotations can be used; must if value contains double quotes
Styles, Text Formats
style="property:value;" |
background-color |
body |
color |
text color |
font-family:xxx |
font-size |
text-align:(center,right) |
<b> |
bold |
<strong> |
<i> |
italic |
<em> |
<mark> |
<small> |
<del> |
취소선 |
<ins> |
Inserted |
<sub> |
아래깔림 |
<sup> |
위깔림 |
<strong> as <b>, and <em> as <i>. 똑같이 보이지만, <strong> and <em> means that the text is "important".
Headings, Paragraphs
<hr> |
가로선 |
<head> |
metadata container. between html & body |
<pre> |
font, space, line break preserved |
Quotes and Citation Elements
<q> |
short |
<blockquote> |
<abbr> |
<address> |
<cite> |
work title |
<bdo dir=""> |
text direction change |
Marking abbreviations - give useful information to browsers, translation systems and search-engines.
Colors
border |
property for setting border |
rgb() |
RGB, 0-255 |
#ffrrggbb |
HEX value, 00 to ff |
hsl() |
HSL value |
Saturation |
intensity - how much gray |
Lightness |
light - how much whiteness |
Alpha (rgba, hsla) |
transparency value |
CSS
CSS |
Cascading Style Sheets |
Inline |
in elements |
Internal |
<style> in <head> |
External |
External CSS file |
padding |
text - border space |
margin |
border-border space |
id="idname" |
Id element-> |
#idname{ } |
define style for it |
class |
attribute, used to classify |
<p class="classname"> </p> |
classify certain element |
<link rel="__" href="__"> |
external references |
p.___{ } |
define class property. ___=name of class, definition goes inside { } |
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
links
<a href = "url">link text</a> |
link syntax |
local link |
link to the same website |
target="" |
specify where to open, in the document |
_blank |
new window |
_self |
in the same window(default) |
_parent |
in the parent frame |
_top |
in the full body of window |
framename |
in a named frame |
<a href="default.asp"> ; <img > ; </a> |
link in image syntax |
title="" |
attribute to a. link title |
<h2 id="C4">ch.4</h2> |
create bookmark (1/2) -> |
<a href="#C4>Jump</a> |
add link to bookmark |
<a href="html_demo.html#C4"> |
link from other page |
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a> |
link from external paths |
local link (link to the same web site) is specified with a relative URL (without http://www....)
Image
float:right/left |
float to text |
<map> |
name="" |
<area> |
define clickable areas |
style: background-image |
Image
float:right/left |
float to text |
<map> |
name="" |
<area> |
define clickable areas |
style: "background-image:url( )" |
background image, to body/ paragraph |
<picture> |
show different images |
Forms
<form> |
user input |
<input> |
type="" |
type="radio" |
radio - 다지선다 |
type="submit" |
action |
att: when submitted |
target |
att. |
method |
att. |
name |
att. name of data received |
<fieldset> |
group related data |
<legend> |
caption |
Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.
|
|
|
|
|
