LeafPig/Web-Dev-Old
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lesson 7

Browse Source
This commit is contained in:
tuffahni
2024-12-25 03:14:41 +00:00
parent f82ea59048
commit 39574a6599
9 changed files with 389 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
nodeJS/Learning/05/public/html/lesson.html Normal file
View File

@@ -0,0 +1,79 @@
<!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>