76 lines
1.6 KiB
Markdown
76 lines
1.6 KiB
Markdown
From Shway (that's me)
|
|
|
|
Last week we went over the basic structure of an HTML webpage and learned the following code:
|
|
|
|
#### What we did last time ######
|
|
# things in hashtags are a comment & don't appear in the code
|
|
|
|
<!DOCTYPE html> # makes the program know that it is an html doc
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<title>This is the title </title> # this appears on the title bar
|
|
|
|
</head>
|
|
|
|
<body> # the body is what will be inside the webpage itself!
|
|
|
|
Blah balah
|
|
|
|
</body>
|
|
|
|
</html> #closing html program tag
|
|
|
|
Remember how we turned it into a web page? _quickly go over it_
|
|
|
|
---
|
|
|
|
## DESIGN CHALLENGE: WEB PROGRAMMING: HTML PT 2
|
|
|
|
This week we want to ✨spruce✨ up our website a bit more so that it looks like a presentable one. We will be getting in groups to present group designs. The challenge is on!
|
|
|
|
#### Tip - Adding an image to your site:
|
|
|
|
Go to google images and **right-click** on any image. You should see a "Copy Link Address" and click that. Paste it into "URL-here.jpg"
|
|
|
|
<img src="URL_HERE.jpg"> #input image code for html
|
|
|
|
Hint: make sure for the Link address that it's either a .jpg or a .png format!
|
|
|
|
<img src="URL_HERE.jpg"
|
|
style="width:100%;"> #this adjusts the size of the image
|
|
|
|
Tip :
|
|
|
|
Add a Search bar into your site
|
|
|
|
```
|
|
<input type="search" name="search">
|
|
```
|
|
|
|
|
|
Eventually CSS will be needed for multiple page creation in order to maintain consistency.
|
|
|
|
Linking to different parts of your code on HTML:
|
|
```html
|
|
<header>
|
|
<h1>The Heading</h1>
|
|
<a href="#content">Skip to content</a>
|
|
</header>
|
|
|
|
<nav>
|
|
<!--loads of navigation stuff -->
|
|
</nav>
|
|
|
|
<section id="content">
|
|
<!--lovely content -->
|
|
</section>
|
|
|
|
```
|
|
|
|
|
|
|
|
Shwetha Jayaraj - all rights reserved.
|