TheMajical/HTML & Basic CSS

## HTML & Basic CSS
==================================== Hyper Text Markup Language (HTML) ===============================

==> Opening and Closing Tags
each tag typically comes with a paired ending tag that begins with a forward-slash
<tag_example></tag_example>

some tags are self closing and will only have one tag which does or does not ends with a forward-slash
<tag_example/>
<tag_element>

==> Comments
<!-- HTML comments are similar to tags because they start and end with the same characters, but the
comments starting character is followed by an exclaimation point. HTML comments can span several
lines. -->

==> Elements
<!DOCTYPE html>
<html>
<meta>
<head>
<title>
<body>
<h1> to <h6>
<p>
<a>
<img />
<div>
<input>
<form>
<style>
<link>

==> Nesting
placing a tag within two other tags (i.e. the same way you make a sandwhich with bread on the outside
and lettuce on the inside; the lettuce is nested inside the bread)
<tag_example>
  <nested_element>
<tag_example>

==> Attributes
Some elements have attributes that are used to "describe" elements
lang
href
alt
src
width
height
type
rel

==> Classes
group naming of multiple elements in order to select and style in css; can be used repeatedly
class="class_name"

==> IDs
unique naming of a single element in order to select and style in css; can only be used once
id="id_name"

==================================== Connecting CSS to HTML =====================================
In document styling using the style tags or connecting the external css file using the link tag.

<style>
  selector {
    attribute: value;
  }
</style>

OR

<head>
  <link href="css_file_name" rel="stylesheet">
</head>

==================================== Cascading Style Sheet (CSS) ===============================

Structure of CSS includes a selector, attribute, and value, the value is concluded with a semi-colon.
Forgetting the semi-colon will make the css invalid and it will not execute.

selector {
  attribute: value;
}

==> Comments
/* CSS comments begin with a forward-slash, an asterick and end with an aterick and forward-slash.
CSS comments can span several lines. */

==> Classes
group name used to style multiple elements, is preceeded with a period
.class_name {
  attribute: value;
}

==> IDs
unique name used to style a single element, is preceeded with a hashtag
#id_name {
  attribute: value;
}

==> Box Model
styling the spacing in relation to content (HTML: text, videos, images, etc) on the page

padding ==> transparent area around the content; left, top, right, bottom
width ==> side to side; horizontal
height ==> top to bottom; veritical
border ==> outside of the padding
margin ==> space between boxes; left, top, right, bottom
fill area ==> are that gets filled with background color or background image
text-align ==> aligns the text to the page centered, left,or right

---------------------------border-------------------------
|         ___________________________________________    |
| margin |               padding                     |   |
|        |           ___________________             |   |
|        |          | <-- fill area --> |            |   |
|        | padding  |   content         |            |   |
|        |          |___________________|            |   |
|        |___________________________________________|   |
___________________________border________________________|


## index.html
<!DOCTYPE html> <!-- this tag identifies the document as being HTML -->
<html lang="en"> <!-- the lang attribute tells the browser that the page is in the English language -->
  <head> <!-- anything nested within the setting of the page such as tab icons, search engine optimization (SEO), visible area of page, and browser details-->
    <meta charset="UTF-8"> <!-- meta tags supply information about the data on the page -->
    <meta name="description" content="Free Web tutorials">
    <meta name="keywords" content="HTML, CSS">
    <meta name="author" content="Daaimah Tibrey">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML & CSS</title> <!-- tab / page title information -->
    <style> /* styles page using css directly in the html file */
      body {
        background-color: lavender;
      }
    </style>
    <link href="style.css" rel="stylesheet">
  </head>
  <body> <!-- anything nested within this tag is visible on the page -->
    <h1>HTML & CSS are fun!</h1> <!-- there are siz of these tags, each has their own predefined font-size -->
    <p>HTML is the text that you will see on the page. It is referred to as page content and structure.</p>
    <h2>Another heading.</h2>
    <p>This is another paragraph section. It looks the same as the previous paragraph when there are no formatting elements or css to change the text.</p>
    <p>This next paragraph will contain a nested link within the paragraph.
      <a href="https://www.linkedin.com/in/daaimah123/">Daaimah's Linkedin Profile</a> <!-- href attribute is used to provide the url link for the provided words within the tag -->
      You can see that it is apart of the paragraph and is not on its own line.
    </p>
    <div class="image">
      <img src="http://4.bp.blogspot.com/-a2ADYMu0TSo/UZGYNURy4wI/AAAAAAAADdk/r8LUpQx3z1o/s1600/Cute-puppies+(1).jpg" alt="newborn brown and white puppies piled into a basket" width="500" height="500"/> <!-- alt attribute is used to provide a description of the image for accessibility purpose (i.e. people who may use screen readers if they cannot see the web with their eyes); the width and height attributes can be in pixels (as provided in this example) or percents (i.e. width="50%" height="50%") to fit the image to the page in a specific way, without these attributes the image will span the page in its original height and width; if you only specify height or weight the respective weight or height will scale proportionately -->
    </div>
    <p class="diff-paragraph" id="diff-font">How much wood could a woodchuck chuck if a woodchuck could chuck wood? Why does this paragraph not have the same font as the next paragraph.</p>
    <p class="diff-paragraph">She sells seashells by the seashore. This paragraph shares the same color as the above paragraph. Can you determine why?</p>
    <form id="your-name">
      <h2>Your Name Here</h2>
      <p>Please fill in this form</p>
      <input type="text" placeholder="Your name"> <!-- type of input can be many things (i.e. email, button, text, date, password, time, etc); placeholder is the default text that you see in the input box before typing -->
      <button>OK</button>
    </form>
  </body>
</html>

## style.css
* {/* selects all selectors on page */
  margin: 0; /* resets all margins for every selector to 0 */
  padding: 0; /* resets all paddings for every selector to 0 */
}

body {
  padding: 50px;
  box-sizing: border-box;
}

form {
  border: red solid 5px;
  width: 400px;
  padding: 10px;
}

h1, h3 {
  margin-bottom: 25px;
}

h1 {
  text-align: center;
}

h3 {
  margin-top: 25px;
}

p, a {
  margin-top: 10px;
}

input, button {
  padding: 10px;
  font-size: 16px;
}

.diff-paragraph {
  color: blue;
}

.img {
  background-color: teal;
  margin-bottom: 25px;
  margin-top: 25px;
  text-align: center;
}

#diff-font {
  font-family: 'Courier New';
  margin-bottom: 10px;
}

#your-name {
  margin-top: 50px;
}

#your-name h2 {
  color: orange;
}
	==================================== Hyper Text Markup Language (HTML) ===============================

	==> Opening and Closing Tags
	each tag typically comes with a paired ending tag that begins with a forward-slash
	<tag_example></tag_example>

	some tags are self closing and will only have one tag which does or does not ends with a forward-slash
	<tag_example/>
	<tag_element>

	==> Comments
	<!-- HTML comments are similar to tags because they start and end with the same characters, but the
	comments starting character is followed by an exclaimation point. HTML comments can span several
	lines. -->

	==> Elements
	<!DOCTYPE html>
	<html>
	<meta>
	<head>
	<title>
	<body>
	<h1> to <h6>
	<p>
	<a>
	<img />
	<div>
	<input>
	<form>
	<style>
	<link>

	==> Nesting
	placing a tag within two other tags (i.e. the same way you make a sandwhich with bread on the outside
	and lettuce on the inside; the lettuce is nested inside the bread)
	<tag_example>
	<nested_element>
	<tag_example>

	==> Attributes
	Some elements have attributes that are used to "describe" elements
	lang
	href
	alt
	src
	width
	height
	type
	rel

	==> Classes
	group naming of multiple elements in order to select and style in css; can be used repeatedly
	class="class_name"

	==> IDs
	unique naming of a single element in order to select and style in css; can only be used once
	id="id_name"

	==================================== Connecting CSS to HTML =====================================
	In document styling using the style tags or connecting the external css file using the link tag.

	<style>
	selector {
	attribute: value;
	}
	</style>

	OR

	<head>
	<link href="css_file_name" rel="stylesheet">
	</head>

	==================================== Cascading Style Sheet (CSS) ===============================

	Structure of CSS includes a selector, attribute, and value, the value is concluded with a semi-colon.
	Forgetting the semi-colon will make the css invalid and it will not execute.

	selector {
	attribute: value;
	}

	==> Comments
	/* CSS comments begin with a forward-slash, an asterick and end with an aterick and forward-slash.
	CSS comments can span several lines. */

	==> Classes
	group name used to style multiple elements, is preceeded with a period
	.class_name {
	attribute: value;
	}

	==> IDs
	unique name used to style a single element, is preceeded with a hashtag
	#id_name {
	attribute: value;
	}

	==> Box Model
	styling the spacing in relation to content (HTML: text, videos, images, etc) on the page

	padding ==> transparent area around the content; left, top, right, bottom
	width ==> side to side; horizontal
	height ==> top to bottom; veritical
	border ==> outside of the padding
	margin ==> space between boxes; left, top, right, bottom
	fill area ==> are that gets filled with background color or background image
	text-align ==> aligns the text to the page centered, left,or right

	---------------------------border-------------------------
	\| ___________________________________________ \|
	\| margin \| padding \| \|
	\| \| ___________________ \| \|
	\| \| \| <-- fill area --> \| \| \|
	\| \| padding \| content \| \| \|
	\| \| \|___________________\| \| \|
	\| \|___________________________________________\| \|
	___________________________border________________________\|
	<!DOCTYPE html> <!-- this tag identifies the document as being HTML -->
	<html lang="en"> <!-- the lang attribute tells the browser that the page is in the English language -->
	<head> <!-- anything nested within the setting of the page such as tab icons, search engine optimization (SEO), visible area of page, and browser details-->
	<meta charset="UTF-8"> <!-- meta tags supply information about the data on the page -->
	<meta name="description" content="Free Web tutorials">
	<meta name="keywords" content="HTML, CSS">
	<meta name="author" content="Daaimah Tibrey">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>HTML & CSS</title> <!-- tab / page title information -->
	<style> /* styles page using css directly in the html file */
	body {
	background-color: lavender;
	}
	</style>
	<link href="style.css" rel="stylesheet">
	</head>
	<body> <!-- anything nested within this tag is visible on the page -->
	<h1>HTML & CSS are fun!</h1> <!-- there are siz of these tags, each has their own predefined font-size -->
	<p>HTML is the text that you will see on the page. It is referred to as page content and structure.</p>
	<h2>Another heading.</h2>
	<p>This is another paragraph section. It looks the same as the previous paragraph when there are no formatting elements or css to change the text.</p>
	<p>This next paragraph will contain a nested link within the paragraph.
	<a href="https://www.linkedin.com/in/daaimah123/">Daaimah's Linkedin Profile</a> <!-- href attribute is used to provide the url link for the provided words within the tag -->
	You can see that it is apart of the paragraph and is not on its own line.
	</p>
	<div class="image">
	<img src="http://4.bp.blogspot.com/-a2ADYMu0TSo/UZGYNURy4wI/AAAAAAAADdk/r8LUpQx3z1o/s1600/Cute-puppies+(1).jpg" alt="newborn brown and white puppies piled into a basket" width="500" height="500"/> <!-- alt attribute is used to provide a description of the image for accessibility purpose (i.e. people who may use screen readers if they cannot see the web with their eyes); the width and height attributes can be in pixels (as provided in this example) or percents (i.e. width="50%" height="50%") to fit the image to the page in a specific way, without these attributes the image will span the page in its original height and width; if you only specify height or weight the respective weight or height will scale proportionately -->
	</div>
	<p class="diff-paragraph" id="diff-font">How much wood could a woodchuck chuck if a woodchuck could chuck wood? Why does this paragraph not have the same font as the next paragraph.</p>
	<p class="diff-paragraph">She sells seashells by the seashore. This paragraph shares the same color as the above paragraph. Can you determine why?</p>
	<form id="your-name">
	<h2>Your Name Here</h2>
	<p>Please fill in this form</p>
	<input type="text" placeholder="Your name"> <!-- type of input can be many things (i.e. email, button, text, date, password, time, etc); placeholder is the default text that you see in the input box before typing -->
	<button>OK</button>
	</form>
	</body>
	</html>
	* {/* selects all selectors on page */
	margin: 0; /* resets all margins for every selector to 0 */
	padding: 0; /* resets all paddings for every selector to 0 */
	}

	body {
	padding: 50px;
	box-sizing: border-box;
	}

	form {
	border: red solid 5px;
	width: 400px;
	padding: 10px;
	}

	h1, h3 {
	margin-bottom: 25px;
	}

	h1 {
	text-align: center;
	}

	h3 {
	margin-top: 25px;
	}

	p, a {
	margin-top: 10px;
	}

	input, button {
	padding: 10px;
	font-size: 16px;
	}

	.diff-paragraph {
	color: blue;
	}

	.img {
	background-color: teal;
	margin-bottom: 25px;
	margin-top: 25px;
	text-align: center;
	}

	#diff-font {
	font-family: 'Courier New';
	margin-bottom: 10px;
	}

	#your-name {
	margin-top: 50px;
	}

	#your-name h2 {
	color: orange;
	}