79 lines
3.0 KiB
HTML
79 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<!-- document type is html, templating language -->
|
|
<html lang="en">
|
|
<!-- english -->
|
|
<!-- Header section, things that dont show in the webpage, e.g. meta-data: wt language ur website is using, website designed for mobile or actual computers, SEO, title, accessibility issues write it here too-->
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<!-- Title: the top part of the webpage thingy -->
|
|
<title>Document</title>
|
|
|
|
<!-- Website description -->
|
|
<meta name="description" content="Ronald's website" />
|
|
<!-- Website keywords -->
|
|
<meta name="keywords" content="Ronald, Website:" />
|
|
<!-- website author -->
|
|
<meta name="author" content="Ronald" />
|
|
|
|
<!-- Favicon, rel: what type of link, href: where to find the icon -->
|
|
<!-- icon: image to icon generator, some pixel restrictions, for the top website icon -->
|
|
<link rel="icon" href="images/favicon.ico" />
|
|
|
|
<!-- CSS styles: called stylesheet, if u type "link: (list of types of link)" then press tab-->
|
|
<link rel="stylesheet" href="css/main.css"/>
|
|
</head>
|
|
|
|
|
|
<!-- Body: everything in the webpage -->
|
|
<body>
|
|
<!-- navigation bar -->
|
|
<!-- <nav></nav> -->
|
|
|
|
<!-- sections -->
|
|
<section>
|
|
<!-- dividers, e.g. left and right side of website -->
|
|
<div class="container">
|
|
<!-- headers, based on size h1 h2 -->
|
|
<h1 class="title-text">Tiffany's to-do list website</h1>
|
|
<h2>second header</h2>
|
|
<!-- paragraph -->
|
|
<p>Welcome to my to-do list</p>
|
|
<!-- subtitles -->
|
|
<sub></sub>
|
|
<!-- bold -->
|
|
<b></b>
|
|
<!-- italics -->
|
|
<i></i>
|
|
<!-- underline -->
|
|
<u></u>
|
|
|
|
<!-- image, people usually use avif, webp -->
|
|
<!-- alt is alternative -->
|
|
<img src="images/image.png" alt="Image not found">
|
|
|
|
<!-- form, what you want the form to do, usually lead into javascript, login.js -->
|
|
<form action="/form-action" method="post">
|
|
<label for="to-do">What do you want to do?</label>
|
|
<!-- theres different types of input, which is what u fill in for form -->
|
|
<!-- type required make it required, placeholders: the invisible list -->
|
|
<!-- usually control through javascript -->
|
|
<input name="todo" type="text" placeholder="Enter your to-do" required class="todo-input"/>
|
|
|
|
<!-- button, if it's a submit button then it will end the form and submit it, other than that the button doesnt do anything -->
|
|
<button type="submit" class="form-submit">Add to form</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
</body>
|
|
|
|
<!-- Footer: the bottom part of the webpage -->
|
|
<!-- <footer></footer> -->
|
|
|
|
<!-- Scripts, where you link javascript files -->
|
|
<!-- <scripts src="index.js"> </scripts> -->
|
|
|
|
</html> |