Skip to content

Commit 82f4ed4

Browse files
jackson-jackson-
committed
images, lists, and links lessons done
1 parent fde0b9c commit 82f4ed4

10 files changed

+199
-0
lines changed

‎IMAGES.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Images
2+
Images are a pretty slick way to add some life to your page. In certain cases they may get your point across better than words can.
3+
4+
## Displaying Images
5+
```html
6+
<img src="URL" alt="some decription">
7+
```
8+
An image is created using an *img* tag like shown above. This tag is also not a container so it doesn't require a closing tag. We see there are two attributes on the tag: *src* and *alt*.
9+
10+
*src* stands for source and is used to define the path to the image.
11+
12+
*alt* stands for Alternate Text and is a quick description of the image. You don't usually see this but it's still important. Search engines use this when indexing the content on your page. This allows them to understand how relevant your page is to someone's search, then route that traffic to you.
13+
14+
Here's an example of an image being used:
15+
```html
16+
<body>
17+
<h1>We Build Black</h1>
18+
<h2>We are Black technologists educating and empowering the Black community to achieve socio-economic change.</h2>
19+
<p>Check us out <a href="https://webuildblack.com">here</a></p>
20+
<img src="./images/logo.png" alt="We Build Black logo">
21+
</body>
22+
```
23+
This renders to this:
24+
![images](./images/images.png)
25+
26+
## Image Display Size
27+
Images have a *width* and *height* attribute that allow you to change the dimensions of the picture. We use a unit called *pixels*, which we represent with *px*, to measure things on screen. Try playing with an image and its size to see what happens. Here's an example:
28+
```html
29+
<img src="./images/logo.png" alt="We Build Black logo" height="300px" width="300px">
30+
```
31+
32+
## Stick around for the next episode...
33+
In the next lesson, we'll be talking about lists. Lists are a great way to emphasize multiple points and enhance page design. See you then!

‎LINKS.md

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
# Links
2+
Links are a crucial part of the internet. They do exactly as their name sounds. They allow us to navigate and connect to other web pages.
3+
4+
# The Simplest Link
5+
```html
6+
<a href="somewebsite.com">Website Name</a>
7+
```
8+
To create a link, we use the *a* tag. The *a* stands for anchor. You'll notice that the anchor tag has a *href* attribute. This stands for hyper reference. This is where you would put the web page you are linking to.
9+
For example:
10+
```html
11+
<a href="https://www.webuildblack.com">We Build Black</a>
12+
```
13+
This renders to this:
14+
![link](./images/link.png)
15+
16+
## Global and Relative Links
17+
Links are actually something called URLs (Uniform Resource Locator), and we can type them in two ways.
18+
19+
### Global Links
20+
Global links refer ot the absolute location of a page. They start with a protocol (usually *http* or *https*), then the domain name (ex:webuildblack.com). Here are some examples of global links:
21+
* *https://colorforcode.com/*
22+
* *https://www.youtube.com/channel/UC4ZjOw_KACO5GSa2ShDuv3Q*
23+
* *https://etsy.com/*
24+
25+
### Relative Links
26+
Relative links point to places on the computer's current system. So think if it as "relative to where you are" links. For example:
27+
* *./images/elephants.jpg* - This is a URL to an image in the same directory as the current page (the './' is optional)
28+
* *../all-images/* - The two dots (..) means to up to the parent directory. Then it says go into another directory in the parent called 'all-images'.
29+
* */documentation* - The forwards slash (/) at the beginning means go to the top of the project. After going to the top of the project, we go into a folder called "documentation"
30+
31+
## Linking inside a page
32+
You can actually link to parts of a page. For example, you can put an *id* attribute on a tag like this:
33+
```html
34+
<button id="buy-button">Click me!</button>
35+
```
36+
Then to link to it, we create an anchor tag with the *href* value the same at the buttons *id* value.
37+
```html
38+
<a href="buy-button">I go the buy button</button>
39+
```
40+
Now, if you click on the anchor tag it will snap your screen to where the buy button is. We'll go deeper into the *id* attribute in the CSS lessons. It's actually really important.
41+
42+
## Email Links
43+
Have you ever clicked an email address on a web page, and your computer automatically opened your email application with a draft to the address you just clicked on? That was an email link and you create them as so:
44+
```html
45+
<a href="mailto:[email protected]">Say hi!</a>
46+
```
47+
48+
## Link titles
49+
Link titles are the messages you see when hovering your mouse over a link. To set a title for a link you must use the *title* attribute. For example:
50+
```html
51+
<a href="https://www.webuildblack.com" title="A Community for Black Technologists">Check us out</a>
52+
```
53+
Put this in your HTML doc and hover the link. You should see that message pop up.
54+
55+
## Stick around for the next episode...
56+
In the next lesson, we'll be getting pretty with images. Our pages are gonna start looking a lil more lively. Don't worry, you'll be done with your karate drills soon :)

‎LISTS.md

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
# Lists
2+
Lists are a great tool to get some information across fairly fast. We can scan over it quickly and get the gist. In this lesson, we'll go over lists and how they can enhance the way we display content.
3+
4+
## Displaying a list
5+
There are two different tyes of lists. Ordered lists:
6+
```html
7+
<ol>
8+
<li></li>
9+
</ol>
10+
```
11+
And unordered lists:
12+
```html
13+
<ul>
14+
<li></li>
15+
</ul>
16+
```
17+
The *li* tag stands for list item and is how we enter in list content. Let's see what these two lists look like:
18+
```html
19+
<body>
20+
<p>What is the capital of New York?</p>
21+
<ol>
22+
<li>New York</li>
23+
<li>Albany</li>
24+
<li>Cooperstown</li>
25+
</ol>
26+
<p>Here are some coding resources:</p>
27+
<ul>
28+
<li>Stack Overflow</li>
29+
<li>We Build Black</li>
30+
<li>Github</li>
31+
<li>Code Academy</li>
32+
</ul>
33+
</body>
34+
```
35+
This renders out to this:
36+
![lists](./images/lists.png)
37+
38+
We can see that the ordered lists uses ordered numbers to list out its items, while the unordered just uses dots. You can even change the list type on the *ol* using the *type* attribute. For example:
39+
```html
40+
<body>
41+
<ol type="a">
42+
<li>Plan 1</li>
43+
<li>Plan 2</li>
44+
<li>Plan 3</li>
45+
</ol>
46+
</body>
47+
```
48+
This renders out to this:
49+
![list-type](./images/list-type.png)
50+
51+
You can find all the ways to change a lists type [here](https://www.w3schools.com/html/html_lists.asp) at W3Schools.
52+
53+
The *ol* tag also comes with two other attributes called *start* and *reversed*. *start* is used to set the number to start the list item count. *reversed* is used to reverse the order of the counting. For example:
54+
```html
55+
<body>
56+
<ol start="10">
57+
<li>Item 1</li>
58+
<li>Item 2</li>
59+
<li>Item 3</li>
60+
</ol>
61+
<ol reverse>
62+
<li>Item 1</li>
63+
<li>Item 2</li>
64+
<li>Item 3</li>
65+
</ol>
66+
</body>
67+
```
68+
This renders this:
69+
![list-attr](./images/list-attr.png)
70+
71+
## Nested Lists
72+
You can even create lists within lists. Did I just blow your mind? Watch this:
73+
```html
74+
<body>
75+
<ul>
76+
<li>Home</li>
77+
<li>About</li>
78+
<li>Shop
79+
<ol reverse>
80+
<li>Shirts</li>
81+
<li>Jackets</li>
82+
<li>Jeans</li>
83+
</ol>
84+
</li>
85+
</ul>
86+
</body>
87+
```
88+
This makes this:
89+
![nested-lists](./images/nested-lists.png)
90+
91+
## Definition Lists
92+
Definition Lists are lists that are made to create a pair of terms and definitions for those terms. To create it you use the *dl* tag, short for definition list. To create items you use the *dt* tag, short for term definition. In that term definition, you put a *dd* tag, short definition definition. It's repetitive, I know. Let's see an example:
93+
```html
94+
<body>
95+
<dl>
96+
<dt>ESPN
97+
<dd>A sports network</dd>
98+
</dt>
99+
<dt>Google
100+
<dd>The Royal Family of Information</dd>
101+
</dt>
102+
<dt>We Build Black
103+
<dd>Something you should check out</dd>
104+
</dt>
105+
</dl>
106+
</body>
107+
```
108+
109+
## Stick sround for the next episode...
110+
In the next lesson we'll be going over tables. We're almost at the end here. Soon you'll be able to pump out websites like a pro!

‎images/images.png

46.5 KB
Loading

‎images/link.png

9.08 KB
Loading

‎images/list-attr.png

10.7 KB
Loading

‎images/list-type.png

8.82 KB
Loading

‎images/lists.png

26.1 KB
Loading

‎images/logo.png

7.13 KB
Loading

‎images/nested-lists.png

12.6 KB
Loading

0 commit comments

Comments
 (0)