Demystifying Buzz Words
The Internet
The internet is just a global network of computers
Each computer/router has an IP address to uniquely identify them just like an actual address for your home.
These IP addresses are assigned by the ISP.
Computers talk to each other using the TCP/IP protocol.
HTTP runs over TCP. It's responsible for handling web traffic (request/response) between a browser (client) and a server.
DNS is used to map IP addresses to domain names.
HTML
HTML is a markup language used to create content on a web page.
HTML has no style hence the need for CSS.
HTML is extremely important for creating websites for it is the base for every web page.
CSS
CSS is a styling language
CSS is used to style the layout of a web page
What can I build with HTML and CSS?
- A Static Website
- The visual part of any website
A Deep Dive into HTML
Meta Tags
Snippets that describe a page's content. They are written in the head tag. They do not appear anywhere in the body of the web page.
Headings, Paragraphs & Typography
<h1>Heading 1</h1>
There are six heading <h1>
to <h6>
.
It is good practice to have just one h1 per page this will help with SEO as it describes the whole content of a page. For example, if it's a blog post, the blog title should be contained in the h1 tag.
Links and Images
<a href="https://google.com" target="_blank"> External link </a>
When linking to another website, it's good practice to open the link on a new window.
Snippet on displaying images below:
<img src="./illustrator.png" alt="Illustration of a Fox" width="450">
Lists
There are two kinds of lists.
- Unordered Lists
<ul>
<li></li>
</ul>
- Ordered Lists
<ol>
<li></li>
</ol>
- Nested Lists
<ul>
<li>Shoes
<ul>
<li>Nike Air Max</li>
</ul>
</li>
</ul>
Tables
<table>
<thead>
<th>Email accounts</th>
</thead>
<tbody>
<tr>
<td>hey@gee.com</td>
</tr>
</tbody>
</table>
Forms & Input
Forms can be displayed and styled with HTML and CSS respectively. However, in order to process the form, you need to code that functionality with a programming language that works on the backend (eg. PHP, Javascript, etc.)
<form action="someScript.php">
<div>
<label for="name">Name </label> <br>
<input type="text" name="name" id="name" placeholder="John Doe">
</div>
<div>
<label for="email">Email</label> <br>
<input type="email" name="email" id="email">
</div>
<div>
<label for="message">Message</label> <br>
<textarea name="message" id="message" cols="50" rows="5"></textarea>
</div>
<div>
<label for="sex">Sex</label>
<select name="sex" id="sex">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="female" selected >Other</option>
</select>
</div>
<div>
<label for="age">Age</label> <br>
<input type="number" name="age" id="age">
</div>
<div>
<label for="birthdate">Birthdate</label> <br>
<input type="date" name="birthdate" id="birthdate">
</div>
<div>
<label for="membership">Membership</label>
<input type="radio" name="membership" value="starter" id="membership">Starter
<input type="radio" name="membership" value="grow" id="membership">Grow
<input type="radio" name="membership" value="scale" id="membership" checked>Scale
</div>
<div>
<label for="hobbies">Hobbies</label>
<input type="checkbox" name="hobbies" value="skating" id="hobbies">Skating
<input type="checkbox" name="hobbies" value="playing-the-violin" id="hobbies">Playing the violin
<input type="checkbox" name="hobbies" value="workouts" id="hobbies" checked>Workouts
</div>
<input type="submit" value="Submit">
<button type="reset">Reset </button>
</form>
Block and Inline Level Elements
Inline elements only take up the full with of the element on that page. Allowing the next element to take up the available space that is unused. (eg. <a>, <span>)
Block-level elements span across the full width of the page and break the next element onto a new line. I there was an Inline element before it, it breaks itself onto a new line and does not take up the unused available space. (eg. <p>, <div>)
Divs, Spans, Classes and IDs
Div is used in creating division (or separation of affairs) in your code.
Spans are inline elements used to target specific text in code.
Classes vs IDs
There is no functional difference between classes and IDs. It is good practice to have your ID naming convention be singular. Do you need to give multiple elements the same style? Use classes. Would you have only one main header? Use IDs.
HTML Entities
Non-breaking space: Gives an horizontal space
Greater than:
>
Less than:
<
Copyright:
©
Euro:
€
Pound:
£
HTML Semantic Tags
These are excellent for organizing your code since the name of the tags is quite descriptive. However, its main goal is accessibility. Writing semantic HTML code helps people with hearing/vision disabilities understand what goes where. They are quite important to use and should be used in place of <div>
which carries no semantic meaning.
Some examples:
<header>
<footer>
<section>
<article>
<nav>
Top comments (0)