basic tags #5
Comments
marianzburlea
added this to the experience all basic HTML with daily usage tags milestone
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Here are some helpful links:
W3Schools - html
MDN - html
-1-
Create your own directory and first html file
When you open this project you will see that there is a src folder. That is where we will maily be working.
In order to start your first website, you need to know the must have tags:
<html>tag #8<head>tag #9<body>tag #12Inside the head tag, the following tags are a must know:
<title>tag #14<meta>tag #15NOTE: In this project, the setup is already prepared for you to start writing code. You will not need to write those tag, just get familiar with them.
Therefore, after the creation of your .pug file you will need to write the following lines:
Note: If there is a case where you have more directories one in another, the path for: extend ../_component/layout/base might change.
-2-
Create your first multipage website with a basic navigation
<main>tag) below block awesome-content. #10Note: When you open your local host, in the browser link bar, you need to add your directory name like so: 'http://localhost:3001/mariateo/'
In order to add content in your main tag, the following tags are the most basic ones.
have at least 2 pages to create a super basic navigation inbetween them. In order to have more pages, you need to create more "something.pug" files in your directory and then make use of the a HTML element. Remember to check the provided links.
display different information on the pages
the
<a>tag #19the
<b>, <i>, <u>tag #27the
<h1>tag, the<h2>tag,the<h2>tag, the<h3>tag, the<h4>tag, the<h5>tag, the<h6>tag #22the
<p>tag #25the
<div>tag #16the
<span>tag #26the
<blockquote>tag #30-3-
Add a list to your website.
Make use of the following tags to add some lists to your website pages.
Hint: You can make a link list, or a list for groceries, fruits, places, etc. Just use your imagination :)
<ul>tag, the<ol>tag, the<li>tag #37-4-
Add a table to your website.
Make use of the following tags to add a table in your website.
Hint: Remember to make use of the attributes for table and td tags. Visit the provided links for documentation.
<table>tag, the<tr>tag, the<td>tag #17-5-
Add a header element
Create a header element, you can put your name in there.
<header>tag and the<footer>tag #31-6-
Add a footer element
Create a footer element where you can put in copyright details and a date. You can put other details as well if you want, such as contact details etc.
-7-
Add an aside element
Create an aside element where you can put in some notes, ideas, thoughts of your progress or whatever content you like. This can be on any page.
<aside>tag #38-8-
Embed some content - [ ] add images to your website
Add some life to your pages. Makes use of the img tag in order to add some images across your website
<img>tag #40-9-
Embed some content - [ ] add an inline frame to your website
Make use of the iframe HTML element to embed another document within the current HTML document.
<iframe>tag #43the
<script>tag #44the
<style>tag #45the
<link>tag #47the
<article>tag #50the
<section>tag #52the
<nav>tag #54the
<audio>tag #56the
<video>tag #59the
<form>tag #61 the<input>tag, the<textarea>tag, the<label>tag, the<select>tagthe
<input>tag #62the
<button>tag #58the
<fieldset>tag #64the
<datalist>tag #67the
<embed>tag #68the
<figure>tag #69the
<picture>tag #70the
<svg>tag #71the
<hr>tag, the<br>tag #73the
<pre>tag, the<code>tag #74the
<s>tag, the<del>tag, the<strong>tag, the<b>tag #76the
<em>tag, the<i>tag, the<u>tag #77the
<small>tag, the<sub>tag, the<sup>tag #78Good to know
the
<menu>tag #80the
<base>tag #81the
<noscript>tag #82the
<data>tag, the<time>tag #84the
<bdo>tag, the<bdi>tag #85the
<abbr>tag, the<address>tag #86the
<canvas>tag - TODO In JavaScriptthe
<cite>tag #87the
<details>tag #89the
<dfn>tag,the<dl>tag, the<ins>tag #91the
<kbd>tag #92the
<map>tag #93the
<mark>tag #95the
<math>tag #98the
<meter>tag #99the
<object>tag #100the
<output>tag #101the
<progress>tag #102the
<q>tag #103the
<ruby>tag #105the
<samp>tag #106the
<template>tag - (this will be presented in JavaScript)the
<var>tag #107the
<wbr>tag #108The text was updated successfully, but these errors were encountered: