Web Development
In this section, we will cover the basics of web developement!
HTML - Hypertext Markup Language
A language that defines the structure of content on a webpage
HTML uses opening and closing tags to add content to the page. The tags and its inner content is known as an element.
For example, we use h
for headers and p
for paragraphs:
<!-- this is a comment -->
<h1>this is a header</h1>
<p>this is a paragraph</p>
There are dozens of different tags to accomplish different tasks!
There are tags such as <video>
, <audio>
, and <canvas>
to embed different media types.
The typical HTML element has an opening and closing tag with content in the middle. The content can be text known as innerText
or other tags known as innerHTML
<!-- where hi == innerText -->
<span>hi</span>
<!-- where child == innerHTML -->
<span>
<p>child</p>
<p>child</p>
<p>child</p>
</span>
The tags can hold attributes as well such as an id
or class
for CSS:
<p id="foo" class="css-class" >
</p>
A basic webpage starts with an HTML tag (<html>
) and has exactly 2 children: <head>
and <body>
:
<head>
contains things that aren’t directly shown like a tile or metadata.<body>
contains the content of the page itself (UI).
<html>
<head>
<title>My First Website!</title>
<meta name="description" content="yay!">
</head>
<body>
<h1>html is fun!</h1>
<p>sometimes...</p>
<img src="./path-to-image.jpg" alt="image"/>
<!-- Direct someone to another link using anchor! -->
<a href="https://www.perfectline.io/">learn to code</a>
</body>
</html>
If an element is self-contained the closing tag is optional (ie. <meta>
or <img/>
)
It is common to group elements together to style them as a whole unit using <div>
:
<html>
<head>
<title>My First Website!</title>
<meta name="description" content="yay!">
</head>
<body>
<h1>html is fun!</h1>
<div id="main-content" class="css-class">
<p>sometimes...</p>
<img src="./path-to-image.jpg" alt="image"/>
<!-- Direct someone to another link using anchor! -->
<a href="https://www.perfectline.io/">learn to code</a>
</div>
</body>
</html>
CSS - Cascading Style Sheets
A stylesheet language that is famous for making websites look pretty.
A typical CSS rule will start with a selector matched to an HTML element in the document:
- Use braces for a declaration block.
- Contains properties that change the appearance of that element.
p { font-size: 1.2em; }
<p>This is a paragraph</p>
Because CSS is cascading, a style sheet may contain multiple rules for the same element. This creates a hierarchy!
The browser uses the rules of cascade, specificity, and inheritance.
- Cascade - the most specific rule will override. In this example, the
inner-class
will override any overlapping class properties fromouter-class
- Specificity - lower specificity like rules for elements like
p
vs higher specificity such as rules for classes or id attributes defined inid
andclass
. Rules fromdiv
will be overridden by rules applied toouter-class
- Inheritance - If unspecified, will take on the properties of their parent (ie background color). If
outer-class
has a text color of white, then thep
inside that div will have white text unless specified otherwise.
<div class="outer-class">
<p class="inner-class">sometimes...</p>
</div>
Let’s say we wanted to change the text color of a <p>
element to red!
To reference an element type just type the name directly like so:
p { color: red; }
We saw this above! But what if we want to change a class like outer-class
or inner-class
? In this case, we put a period and then the name of the class we want to create rules for:
.outer-class { color: red; }
To write CSS you can either create a document ending in .css
or include a <style>
tag directly in your HTML like so:
<style>
.red { color: red; }
</style>
<h1>this is my header</h1>
<p class="red">turn me red</p>
CSS relies on the Box Model for formatting.