Web Development is designing a website using HTML, CSS & Javascript. Traditionally static websites used only HTML & CSS in web design but later Javascript was created so that sites can have different behaviors.
You can think of this as:
- HTML - Basic structure of sites
- ie) Outline sketches or drawings in Anime
- CSS - Control presentation, formatting and layout of the site
- ie) Coloring and the character design
- Javascript - Controls the behavior of the elements
- ie) Animations of the anime characters
HTML stands for HyperText Markup Language. A markup language uses tags to identify different types of content and the purposes they serve to each webpage.
These HTML tags also called "elements" specify the structure of the site similar to a human skeleton. Each tag represents a different components or makeup of the site.
- Element - Makes up opening tag, closing tag and the content within the tags. An element can contain elements inside it as well.
<p>Twice is best group ever!</p>- Tags - Define the type of element and the start and closing of that element
<body></body>- Attributes - Properties that provide additional information about that element. It's used to refer to the location of images, websites, css files and classes or id.
<a href="twiceIsBest.com" class = "Logo" id="Best">...</a>Most elements have a pair of opening and closing tags but some <br>, <embed>, <img>, <meta> are self-closing.
Sites follow this format with the
<!DOCTYPE html>- Describes what edition of html to use. (Newest one)<html>- Tells the start and end of the HTML document<head>- Contains your meta-data, links, titles, CSS files and scripts that are run immediately<body>- Contains the main structure of your HTML page seen by the user. INclude scripts you want run then
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a web page.</p>
</body>
</html>CSS stands for Cascading Style Sheets. It's a styling language when coupled with HTML changes the appearance and animations of the HTML tags. You specify in your CSS files the colors, fonts, spacing, animations and so on forth.
Cascading means that styling changes from your parents trickle down to your child elements.
-
Selectors - Designates the styling for a target element(s) within an HTML document. There are three types of selectors: type, class and id.
- Type - Refers to the element type ie)
body {...} p {...} div {...}
- Class - Refers to elements that includes the classes' name inside the class attribute
.Logo { ... }<h1 class="Logo">Twice is Life</h1>
- ID - Refers only to a specific element. ID styling only applies to first element declared with that id.
# twice { ... }
<div id="twice"> ... </div> <a href="..." id="twice"> Hi </a> <!-- The ID styling doesn't apply -->
-
Properties - Descriptions of styling effects
- Values - Numerical values to the types of styling
html {
box-sizing: border-box; /* Tells the browser to include padding and margins in the element's width */
}tells
Javascript is a dynamically-typed programming language that controls the behavior of a site. It can modify website content and change how the site reacts to user action. Most importantly it allows web developers to create interactive sites. Adding javascript to a site requires using the script tag.
Uses include security password cration, check forms, interactive games, animations and special effects. You can create mobile apps or even server-side application.
You normally use a <script>tag to refer to your javascript files. The only time you would use a <link> tag to reference a javascript file would be if you would want to preload the file. Then later on you would use a <script> to execute that file in your body.
A <link> file is to relate stylesheets or other linked documents. ex) CSS, appendix, glossary etc. Although mainly in web dev, it's usually css stylesheets.
<script src="~/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<link href="~/Scripts/jquery-1.4.1.js" as="script" rel="preload" />