onlyforbopi
1/30/2018 - 1:02 PM

Html / CSS - Basics

  1. Titles
  2. Div tags
  3. Class tags
  4. Header tags
  5. Head Element
Html.HeadElement.html
content_copyfile_download
############################################################

The HTML <head> Element
The HTML <head> element has nothing to do with HTML headings.

The <head> element is a container for metadata. HTML metadata is data about the HTML document. Metadata is not displayed.

The <head> element is placed between the <html> tag and the <body> tag:

Example
<!DOCTYPE html>
<html>

<head>
  <title>My First HTML</title>
  <meta charset="UTF-8">
</head>

<body>
.
.
Note: Metadata typically define the document title, character set, styles, links, scripts, and other meta information.
html.headertags.html
content_copyfile_download
###########################################################

Html headers <h1> to <h6>

The <h1> to <h6> tags are used to define HTML headings.

<h1> defines the most important heading. <h6> defines the least important heading.

Bigger Headings
Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute:

Example
<h1 style="font-size:60px;">Heading 1</h1>

HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML page:

Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
Html.SameClassDiffTag.html
content_copyfile_download
###########################################################

SAME CLASS DIFFERENT TAG


Same Class, Different Tag
Different tags, like <h2> and <p>, can have the same class name and thereby share the same style:

Example
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>

<!DOCTYPE html>
<html>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
} 
</style>
<body>


<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France.</p>

<p>Even if the two elements do not have the same tag name, they can have the same class name, and get the same styling.</p>

</body>
</html>
Html.MultiClass.html
content_copyfile_download
#######################################################
# DONE
 
 MULTIPLE CLASSES IN CSS
 
 
 <!DOCTYPE html>
<html>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
} 


.main {
  text-align: center;
}


</style>
<body>

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

<p>All three headers have the class name "city", in addition, London also have the class name "main", which makes the text center aligned.</p>

</body>
</html>
html.class.tag.html
content_copyfile_download
########################################################
# DONE


HTML - CSS CLASS TAG

Class attribute specifies one or more class names for an HTML element
Class name can be used by CSS and JS to perform tasks

ie styling elements 

<style>
.city {
    background-color: tomato;
    color: white;
    padding: 10px;
} 
</style>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>
Html.div.tag.html
content_copyfile_download
##########################
# How to wrap elements in div classes
 
<div></div>
<div id="aaa"</div>
		* A div class can wrap an entire part of the page, ie body
 
 
#######################################################
 
HTML - CSS DIV TAGS
 
* A div tags separates a logical unit, often used for styling but placing parts of code in <div> tags and then assigning a style
to them or positioning them in the page
 
		<div id= 		-> Assigns name to div
 
		<div id="login-div">
		 
		 + In header we place : 
		 
		  <style>
        #login-div {
            position: absolute;
            left: 40%;
            top: 40%;
            border: 1px solid #ccc;
            padding: 10px 10px;
        }
Html.Title.html
content_copyfile_download
# How to set title
<head><title> -> ....

##############################################################################
# <head> and <title>

<!-- The browser displays the title of the page because the title can be specified directly inside of the <head> element, by using a <title> tag.
-->

<!DOCTYPE html>
<html>
  <head>
    <title>My Coding Journal</title>
  </head>
</html>

# We can define language in the html tag
<!DOCTYPE html>
<html lang-"en">
  <head>
    <title>My Coding Journal</title>
  </head>
</html>

# Theory
The <html> tag tells the browser that this is an HTML document.
The <html> tag represents the root of an HTML document.
The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).