Simple Recipe Website - The Odin Project - Project 1
<!-- DOCTYPE html and </html> signify the beginning and ending of the -->
<!-- websites code -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The header, contains information needed to correctly display -->
<!-- a website -->
</head>
<body>
<!-- The basic outline for a website -->
</body>
</html>In VSCode simply typing '!' and hitting tab will allow you to create a header.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>The header stores the information we need. Charset tells the webpage which character set to use. Standard is UTF-8. The title is what will appear in the browser bar/tab.
- Using paragraph and break
- Using p to create paragraphs in the body.
- br to seperate within paragraphs.
- Using italics and bold characters
- The em tag will allow you to print using italicized characters.
- The strong tag allows text to be bolded.
- Headers
- The h# tag allows you to create different sized heading lines.
<p>
This is a brand new paragraph.
</p>
<p>
<em>This is a brand new paragraph in italics</em>
<!-- Creating a break within this paragraph -->
<br>
<strong>This is a brand new line in bold.</strong>
</p> - List elements
- Using li for both types of lists to add list elements.
- Unordered lists
- Uses the ul tag to create unordered lists.
- Ordered lists
- The ol tag is used to create ordered lists.
<!-- Creating an unordered list. Elements will have bullets. -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<!-- Creating an ordered list. Elements will be numbered by default. -->
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>- Images
- Uses the img tag to link an image into a website
- src subtag contains the path to the image. Can be absolute or relative to the current directory.
- alt subtag shows when the image is unable to load for whatever reason.
- Uses the img tag to link an image into a website
- Links
- Links to other webpages.
- Within the domain can use relative or absolute paths.
- Outside of the domain must use the absolute path and needs to include the http:// or https:// part of the website.
- Links to other webpages.
- Absolute path containts the full path. If used internally would include the entire path necessary to get to the desired file. If used as part of a link or image must include the http:// or https:// part.
- Relative paths allow you to avoid using the entire path and scope the project to the current directory.
- ./path/to/file if you can navigate from the current directory.
- ../ in a path moves you up one folder. ../path/to/file would be used if you are one removed from the current directory to the main path.
<!-- Image linked with an absolute path -->
<img src="https://www.theodinproject.com/mstile-310x310.png" alt="The Odin Project Logo">
<!-- Internal domain linked with a relative path -->
<a href="./pages/about.html">About</a>Create a simple website that links to three recipes that can be navigated to using a simple interface. The website should be viewable through Github link integration.
To use GitHub link integration:
- The main hubpage needs to be named index.html
- On GitHub, go to your repo and click Settings -> Pages
- Change the source from none to main branch and click Save.
- It may take up to 10 minutes, but the website should be viewable from
your-github-username.github.io/your-github-repo-name