The Veritas; The Crystal Dimension (Tymon Nikia Bolton II's Website)

The Veritas; The Crystal Dimension (Tymon Nikia Bolton II's Website)

Where All Is Made Truth...
 
HomePortalCalendarPublicationsFAQRegisterLog in
Who is online?
In total there are 18 users online :: 6 Registered, 2 Hidden and 10 Guests

Chomao, Linomaru Hugo, Overlord Tensei, Tabrynth, Tasha Hugo, Valparaiso Denizens

Most users ever online was 49 on Sun Jun 05, 2016 4:56 pm
Social bookmarking
Social bookmarking digg  Social bookmarking delicious  Social bookmarking reddit  Social bookmarking stumbleupon  Social bookmarking slashdot  Social bookmarking yahoo  Social bookmarking google  Social bookmarking blogmarks  Social bookmarking live      

Bookmark and share the address of The Veritas; The Crystal Dimension (Tymon Nikia Bolton II's Website) on your social bookmarking website

Share | 
 

 Coding Notes

Go down 
AuthorMessage
Tear M. Lacrimoso
Shinigami Tsukuyomi :: Moon's Eye Mirror; Keeper of the Crystal Heart
Shinigami Tsukuyomi :: Moon's Eye Mirror; Keeper of the Crystal Heart
avatar

Posts : 1446
Dog
Pisces Male Reputation : 1
Join date : 2014-11-04
Age : 24
Location : Pandemia (Mors Academia)
Job/hobbies : The Teacher

PostSubject: Coding Notes   Fri Aug 10, 2018 12:08 am

-Cheat Sheet-

Boilerplate

<!doctype html> -- {! = html (link)}
<head>
<link href="folder/style.css" type="text/css"
rel="stylesheet">
<title>Website Title</title>
</head>
<body>
</body>
</html>

Images
<img src="url/file location">
alt="hovertext"

Video
<video autoplay muted loop controls>

<source src="url or file" -- type = "video/filetype">

This text shows if browser is unsupportive.
</video>

_________________
"Nothing is unclear to eyes cleansed by tears." ~~ An Elegant Engagement;
'Moonlight Waltz'


"Shall we dance under the evening sun bright, late into the glassy-eyed moon's light?" ~~ God Of Death;
'Tsukuyomi Yin'


"Tears of a thousand,
Pain of a million," ~~Tear Lacrimoso;
'Weeping Willow'


"Filled with Destruction and Anguish,
Grinding your emotions down to dust,
Crushing your happiness into nothing," ~~ Mechanica;
'The Reaper'


"Our thoughts clash
And my soul weeps..." ~~ Moon's Passion;
'Deadly Rondo'
Back to top Go down
Tear M. Lacrimoso
Shinigami Tsukuyomi :: Moon's Eye Mirror; Keeper of the Crystal Heart
Shinigami Tsukuyomi :: Moon's Eye Mirror; Keeper of the Crystal Heart
avatar

Posts : 1446
Dog
Pisces Male Reputation : 1
Join date : 2014-11-04
Age : 24
Location : Pandemia (Mors Academia)
Job/hobbies : The Teacher

PostSubject: Re: Coding Notes   Fri Aug 10, 2018 12:15 am

Relative Measurements

units: em-sizes relative to font size of parent element
rem - sizes relative to font of root element

percentages: used to size box-model features; width, height.
Padding.Margin
Horizontal & Vertical - Margin & Padding - Relative to width of parent element.

image or video: set height or width and converge to auto to display correctly.

background size: cover -- will set image to scale proportionally.

Media Queries
Adapt a website's flow for different screen sizes.

@ Media & only screen and (max-width:480px){}

Parameters set in parentheses. If all conditions need to be met, separate with and if optional, use a comma ','.
Mex/Min Width in px.
Resolution in dpi
Orientation landscape or portrait

_________________
"Nothing is unclear to eyes cleansed by tears." ~~ An Elegant Engagement;
'Moonlight Waltz'


"Shall we dance under the evening sun bright, late into the glassy-eyed moon's light?" ~~ God Of Death;
'Tsukuyomi Yin'


"Tears of a thousand,
Pain of a million," ~~Tear Lacrimoso;
'Weeping Willow'


"Filled with Destruction and Anguish,
Grinding your emotions down to dust,
Crushing your happiness into nothing," ~~ Mechanica;
'The Reaper'


"Our thoughts clash
And my soul weeps..." ~~ Moon's Passion;
'Deadly Rondo'
Back to top Go down
Tear M. Lacrimoso
Shinigami Tsukuyomi :: Moon's Eye Mirror; Keeper of the Crystal Heart
Shinigami Tsukuyomi :: Moon's Eye Mirror; Keeper of the Crystal Heart
avatar

Posts : 1446
Dog
Pisces Male Reputation : 1
Join date : 2014-11-04
Age : 24
Location : Pandemia (Mors Academia)
Job/hobbies : The Teacher

PostSubject: Re: Coding Notes   Fri Aug 10, 2018 12:32 am

CSS Display Selectors

position: static default
absolute - locks to top left of box; scrolls with screen
relative - to its default position
fixed - pinned to page

Z - index : X - Integer -- position top of elements

display: controls left to right flow of elements
inline - cannot have x, y and take up little space -- Z
block - width of their container, set height and width
inline-block: left to right, control height & width
float: left/right moves elements as far as possible
clear: left/right/top/bottom edge will not touch anything on that side

Flex-Box
Flexcontainers hold flex items
To display as flex: display: flex or inline-flex;

display: flex-aligns content left to right. No other things will appear on the same line. Child elements will not appear on new lines
inline - flex - dns will display next to each other if space allows

justify-content: orders content left 2 right
flex-start: from left 2 right, no extra space
flex-end: last item for right, no space between
center: all items in order in center, no extra space
space-around: equal space before & after
space-between: equal space between them, no extra space before or after elements

align-items:orders content vertically
flex-start: all elements positioned at the top of parent container
flex-end: bottom of parent container
center: center of all elements halfway from top and bottom of parent
baseline: bottom of all items aligned

stretch: all items stretch from top to bottom. min-height will stretch -- max height will not

flex-grow: specifies if items will grow to fill the container and can be set proportionally depending on the number of items; 1 2 3

flex-shrink: specifies if items will shrink and in what proportions; 1 2 3

flex-basis: specifies the size of the item before it grows or shrinks

flex: sets grows shrink basis grow and basis can be set in 2 values; 2, 1 -15px

flex-wrap: changes wrap property
wrap: move o next line
wrap-reverse: moves to live before
nowrap: default-override other css rles

align-content: space rows from top to bottom
flex-start: all rows will be at the top of the parent container with no space between
flex-end: all rows at bottom of parent container; no space between
center: all rows positioned at the center of parent

No space between
space-between: rows spaced evenly top-bottom with no space above first or below last.
space-around: all rows evenly from top-bottom with same space before & after.
stretch: if no min or max height specified, rows fill parent container.

flex-direction: changes direction of rows of elements
row: left to right (default) starting from top corner
row-reverse: right to left starting from top corner
column: from top to bottom from left corner
column-reverse: bottom to top from left corner

flex-flow: declares flex direction -- flex wrap.

_________________
"Nothing is unclear to eyes cleansed by tears." ~~ An Elegant Engagement;
'Moonlight Waltz'


"Shall we dance under the evening sun bright, late into the glassy-eyed moon's light?" ~~ God Of Death;
'Tsukuyomi Yin'


"Tears of a thousand,
Pain of a million," ~~Tear Lacrimoso;
'Weeping Willow'


"Filled with Destruction and Anguish,
Grinding your emotions down to dust,
Crushing your happiness into nothing," ~~ Mechanica;
'The Reaper'


"Our thoughts clash
And my soul weeps..." ~~ Moon's Passion;
'Deadly Rondo'
Back to top Go down
Tear M. Lacrimoso
Shinigami Tsukuyomi :: Moon's Eye Mirror; Keeper of the Crystal Heart
Shinigami Tsukuyomi :: Moon's Eye Mirror; Keeper of the Crystal Heart
avatar

Posts : 1446
Dog
Pisces Male Reputation : 1
Join date : 2014-11-04
Age : 24
Location : Pandemia (Mors Academia)
Job/hobbies : The Teacher

PostSubject: Re: Coding Notes   Fri Aug 10, 2018 8:55 am

CSS Selectors (continued)

{Font-weight: bold/normal
text-align: right/left/center
color: (foregroundcolor.) now or hex #
background - color: name or hex #
opacity: 0 - 1 = 0% = 100% visible
background-image: url ("www.ves.net"); or if in same project "images/blank.jpg"

border: x px style color
border-radius: x px curved corners -- 100% creates
padding-top-bottom: x px y px z px a px
margin - right - left: top right bottom left

horizontal margins meet always
vertical margins take the larger margin
min/max-width: x px sets parameters for sizing
overflow: scroll hidden visible
visibility: hidden visible

Box Module (Layers)
Margin - space between elements
border - thickness & style
padding - between content & border content
height x width px

box-sizing: border-box keeps box sizes based on the border

_________________
"Nothing is unclear to eyes cleansed by tears." ~~ An Elegant Engagement;
'Moonlight Waltz'


"Shall we dance under the evening sun bright, late into the glassy-eyed moon's light?" ~~ God Of Death;
'Tsukuyomi Yin'


"Tears of a thousand,
Pain of a million," ~~Tear Lacrimoso;
'Weeping Willow'


"Filled with Destruction and Anguish,
Grinding your emotions down to dust,
Crushing your happiness into nothing," ~~ Mechanica;
'The Reaper'


"Our thoughts clash
And my soul weeps..." ~~ Moon's Passion;
'Deadly Rondo'
Back to top Go down
Tear M. Lacrimoso
Shinigami Tsukuyomi :: Moon's Eye Mirror; Keeper of the Crystal Heart
Shinigami Tsukuyomi :: Moon's Eye Mirror; Keeper of the Crystal Heart
avatar

Posts : 1446
Dog
Pisces Male Reputation : 1
Join date : 2014-11-04
Age : 24
Location : Pandemia (Mors Academia)
Job/hobbies : The Teacher

PostSubject: Re: Coding Notes   Fri Aug 10, 2018 8:59 am

HTML Tables

<table> making a table of stuff
<tr> rows for the tables
<td> data for tables (cdspan = "2") for cell stretch
<th>heading for table (rowspan = "2")
scope = "col" or "row"

<thead> section off different parts of the table
<tbody>

<tr>
<thead>
<th> Character
<th> Village
<th> Penk
</thead>

</tr>
<tr>

<tbody>

<td>
<td>
<td>

</tbody>

<tr>
<tfoot>
<td>
<td>
</tfoot>

_________________
"Nothing is unclear to eyes cleansed by tears." ~~ An Elegant Engagement;
'Moonlight Waltz'


"Shall we dance under the evening sun bright, late into the glassy-eyed moon's light?" ~~ God Of Death;
'Tsukuyomi Yin'


"Tears of a thousand,
Pain of a million," ~~Tear Lacrimoso;
'Weeping Willow'


"Filled with Destruction and Anguish,
Grinding your emotions down to dust,
Crushing your happiness into nothing," ~~ Mechanica;
'The Reaper'


"Our thoughts clash
And my soul weeps..." ~~ Moon's Passion;
'Deadly Rondo'
Back to top Go down
Tear M. Lacrimoso
Shinigami Tsukuyomi :: Moon's Eye Mirror; Keeper of the Crystal Heart
Shinigami Tsukuyomi :: Moon's Eye Mirror; Keeper of the Crystal Heart
avatar

Posts : 1446
Dog
Pisces Male Reputation : 1
Join date : 2014-11-04
Age : 24
Location : Pandemia (Mors Academia)
Job/hobbies : The Teacher

PostSubject: Re: Coding Notes   Sat Aug 11, 2018 10:25 am

/*comment*/

CSS Cascading Style Sheets

style.css = filename/extension
<style>
<link> link to the CSS page (self-closing tag n<head> element)
href="CSS URL" in same directory, or /extension
type= "text/CSS" for.css file
nel = "stylesheet" relationship between files

CSS Code

Selector = { : (selects all elements in html)
*universal selector
syntax: selector{ property: value; (selector,selector) }

<ahref = "#blank"> wrapping text

properties

color: none or hexadecimal
font-size: px (!important) overrides other css (in.html)
font-family: Arial, Wingdings, Times (no capitals)

eg. <link
href = "./style.css (within the same directory) type = "text/css"
rel = "stylesheet">

class {selects class elements in html}

add multiple classes to.html elements to create combinations "class 1 class 2 class 3"
class conjunctions across different elements create elegant styling

text - transform: uppercase/lowercase
#id selects id tags before class tags

_________________
"Nothing is unclear to eyes cleansed by tears." ~~ An Elegant Engagement;
'Moonlight Waltz'


"Shall we dance under the evening sun bright, late into the glassy-eyed moon's light?" ~~ God Of Death;
'Tsukuyomi Yin'


"Tears of a thousand,
Pain of a million," ~~Tear Lacrimoso;
'Weeping Willow'


"Filled with Destruction and Anguish,
Grinding your emotions down to dust,
Crushing your happiness into nothing," ~~ Mechanica;
'The Reaper'


"Our thoughts clash
And my soul weeps..." ~~ Moon's Passion;
'Deadly Rondo'
Back to top Go down
Tear M. Lacrimoso
Shinigami Tsukuyomi :: Moon's Eye Mirror; Keeper of the Crystal Heart
Shinigami Tsukuyomi :: Moon's Eye Mirror; Keeper of the Crystal Heart
avatar

Posts : 1446
Dog
Pisces Male Reputation : 1
Join date : 2014-11-04
Age : 24
Location : Pandemia (Mors Academia)
Job/hobbies : The Teacher

PostSubject: Re: Coding Notes   Sat Aug 11, 2018 10:33 am

html

boilterplate code

<!DOCTYPE html> - language for the page to read

<html> code goes here </>
<head> <title> goes here </>
<title> title of each page </>
<body> the rest of the code goes here </>

Content Code
<div> groups HTML content </> - id = "blah"
<h1> Largest heading </> css selector
-2 <span> separates in line text</>
-3 <strong>bold</>
-4 <em>italic</>
-5 <video> src = "URL" width = "px" height = "px"
<-6> smallest heading
<p> adds a new paragraph </> <nav>
<ul> unordered list bulletpoints
<li> list components </>
<ol> ordered list numbered
<a> anchor a link to nested text </>
href = "websiteURL" attribute -- always go in opening tags
target = "_blank" attribute -- opens in a new window.
<img> pictures - self closing
src = "URL"
alt = "Note on the picture"
<br/> line break - self closing
<! -- comment -- >

_________________
"Nothing is unclear to eyes cleansed by tears." ~~ An Elegant Engagement;
'Moonlight Waltz'


"Shall we dance under the evening sun bright, late into the glassy-eyed moon's light?" ~~ God Of Death;
'Tsukuyomi Yin'


"Tears of a thousand,
Pain of a million," ~~Tear Lacrimoso;
'Weeping Willow'


"Filled with Destruction and Anguish,
Grinding your emotions down to dust,
Crushing your happiness into nothing," ~~ Mechanica;
'The Reaper'


"Our thoughts clash
And my soul weeps..." ~~ Moon's Passion;
'Deadly Rondo'
Back to top Go down
Sponsored content




PostSubject: Re: Coding Notes   

Back to top Go down
 
Coding Notes
Back to top 
Page 1 of 1
 Similar topics
-
» Chatbox Coding
» header hover coding ?
» Is there a way to let the options for sticky notes available on my forum?
» Chatbox Coding in Custom HTML Page
» JK Rowling is generous--but not to the McCanns any more

Permissions in this forum:You cannot reply to topics in this forum
The Veritas; The Crystal Dimension (Tymon Nikia Bolton II's Website) :: The Omnibus; Menu (Communication System) :: Updates; News And Announcements :: Notices :: Notes-
Jump to: