`, ``, ``, etc. How does the text change as the heading number change?
{% endhint %}
## Divs
The `` element is the most popular element in HTML, and is short for "division." ``s are used to **divide your code into sections**.
While ``s themselves do not change how the website renders, we can give them custom styles with CSS (which we will learn about later). Applying a "style" to a `` element will **apply the same style to every element within its tags**, making it useful for adding color to your website.
Here's an example of using ``s:
```markup
The Northern Cardinal
About
Species
Features
Habitat and Location
High-Populated Locations
Natural Environment
Media
Images
Videos
```
This example is the skeleton of a website dedicated to the Northern Cardinal.
``s are used to separate the introduction, the location, and the media aspects of this website. Notice how an `` element is used to give the website a **main title**.
``s can enclose any elements, including text and images. Remember to **indent two spaces** when you nest elements inside ``s to improve readability.
{% hint style="success" %}
**Task**:
Delete all existing code in your Repl, and copy/paste the code above. Update the website to see how it displays. Now, remove the ``s but keep their content untouched. Does the website preview look different with or without ``s? After that, delete all code and re-paste the above snippet, including the ``s.
{% endhint %}
## Attributes
If you want to expand on how an element works, we can use what are called attributes! Attributes are teeny bits of info that we add onto elements to change how they work.
Here is a diagram:
Notice how the opening tag of the `` above has some text right before the "`>`." That is called an attribute, and in this case, it is the `id` attribute.
This attribute doesn't really change how the code is rendered, but it does make it easier for people reading and editing your code (like your mentor!) to tell what it all means.
Attributes are generally used in combination with CSS to tell the website how certain elements should look (e.g changing font size, color, line spacing, etc). For now, we'll stick to using the `id` attribute to give descriptions to each of our ``s.
{% hint style="success" %}
**Task:**
Give the first `` an `id` attribute of "introduction." Give the second an `id` of "habitat." Give the third an `id` of "media." Call over your mentor to double check your work.
{% endhint %}
## Stylizing Text
So far, all of our text (both headings and paragraphs) have been in normal font. What if we want to add more emphasis to our text, like **bolded/***italicized* words, and bullet points/numbered lists?
{% hint style="success" %}
**Task:**
Let's setup some text in our "Introduction to HTML" website to experiment with.
1. Copy the following text:\
`The northern cardinal (Cardinalis cardinalis) can be found in southeastern Canada, the southeastern United States (from Maine to Texas), and south through Mexico, Belize, and Guatemala. Its conservation status is "Least Concern."`
2. Put that text as a `` element directly under the `
` "About" element in your document.
{% endhint %}
### Bold and Italics
Click the "Bold" and "Italics" tabs below to learn how to use both text styles.
{% tabs %}
{% tab title="Bold" %}
To bold text in HTML, put the \ tags around the specific words. For example:
```markup
This is an example sentence with bolded words
```
The above will render as "This is an example sentence with **bolded** words" on the website.
{% endtab %}
{% tab title="Italics" %}
To italicize text in HTML, put the \ tags (short for emphasis) around the specific words. For example:
```markup
This is an example sentence with italicized words
```
The above will render as "This is an example sentence with *italicized* words" on the website.
{% endtab %}
{% endtabs %}
{% hint style="success" %}
**Task:**
In your Repl document, italicize the words "Cardinalis cardinalis" (which is the scientific name for the northern cardinal). Bold the words "Least Concern" (which means that the northern cardinal is not a threatened/endangered species). \
\
Update your preview to see what happened. Is the effect expected? Does it look like your code is broken? Is it throwing errors everywhere? Come to a mentor if you're having questions.
{% endhint %}
### Unordered and Ordered Lists
In HTML, there are two versions of lists.
{% tabs %}
{% tab title="Ordered" %}
Ordered lists look like this:
1. This
2. Is
3. An
4. Ordered
5. List
To use ordered lists, keep list items `` as children within an overall `` element. E.g:
```markup
- This
- Is
- An
- Ordered
- List
```
This will render a numbered list similar to the above.
{% endtab %}
{% tab title="Unordered" %}
Unordered lists look like this:
* This
* Is
* An
* Unordered
* List
Unordered lists are not *always* bulleted. Some browsers display them as dashed lists, like below:
\- This\
\- Is\
\- An\
\- Unordered/Dashed\
\- List
To use unordered lists in your website, keep list items `- ` as children within an overall `
` element. E.g:
```markup
- This
- Is
- An
- Unordered
- List
```
This will render a bullet-point-like list similar to the above.
{% endtab %}
{% endtabs %}
{% hint style="success" %}
**Task:**
Make an **unordered** list under the \ "Species" element containing the following entries:
* C. c. phillipsi
* C. c. clintoni
* C. c. seftoni
* C. c. townsendi
* C. c. flammiger
Make an **ordered** list under the \ "High-Populated Locations" containing the following entries:
1. United States
2. Canada
3. Mexico
4. Guatemala
5. Belize
6. Bermuda (introduced)
7. Hawaii (introduced)
Update the website preview to see if your code works.
{% endhint %}
## Images
So far, our entire website has just been one massive block of text. Let's add some images to give it some flavor!
Images are put in HTML by using the `![]()
` element. Unlike most elements, the `![]()
`only has an opening tag. There is no "``" in HTML.
To use an `![]()
` tag, you need to combine it with an "`src`," "`width`," and/or "`height`" attributes.
```markup
```
The above code means it is taking an example image (we will get to this next), and forcing it to have a height of 500 pixels.
In our example website, we will use 2 images (and one video later on :D). Please download the images and videos to your **Desktop** from [this Google Drive folder](https://drive.google.com/drive/folders/1KNQ1Xu5WQK5kgQxDkFTO9FlXcphtfThm?usp=sharing).
On Repl, look at the Files panel on the left side of the screen. Click the "Add Folder" icon as shown below.
Name the folder "assets" and click inside of it. Click the three dots as shown and click "Upload file."
Upload each individual file into your project. Drag those three files into your assets folder. It should now look like this:
If you're having difficulty, please reread the instructions or talk to a mentor,
Next, click back into your `index.html` file and add the following code to right under the `` "Images" in the Media section.
```markup
![]()
![]()
```
Notice how we didn't include a `width` attribute. This is because if we include just the height, the computer will calculate and apply a width that keeps the original proportions of the image.
Notice how the `src` field is blank. `src` is essentially a "link" to your files. Since our images are stored in the assets folder, our link to each file is `/assets/filename.jpg`, where "filename" is the name of the image. In the following task, you will add the necessary code to the `src`.
{% tabs %}
{% tab title="Instructions" %}
**Task:**
Add the cardinal-pair.jpg link to the first `![]()
` tag. Add the cardinal-with-raspberries.jpg link to the second. \
\
Remember to add the "`/assets/`" to the beginning of the filename, since we put the files in an assets folder.
When you think you did it right, preview the page. Do the images look stretched? Do the images just not appear at all? Try changing some stuff. If you're still stuck, you can look at the above tab labeled "Code" to help.
Once finished, show your code to a mentor to double check that everything is correct.
{% endtab %}
{% tab title="Code" %}
```markup
```
{% endtab %}
{% endtabs %}
## Videos
As mentioned before, we can also add videos to our code!
Unlike images, videos have both an opening tag and a closing tag as shown below:
```markup
Video from https://www.youtube.com/watch?v=05POu0uob4Y.
```
`src` and `height` are self-explanatory, but what is controls? What is "Video not supported"?
* **Controls:** Adding the word "controls" before the closing angle bracket of the opening tag makes it so that the video player appears with controls (e.g play/pause, volume) rather than just the video itself.
* **Video not supported:** This text will render in the event that the browser fails to access the video.
The paragraph element is just providing the source of the video (a YouTube video). It isn't anything special.
{% hint style="success" %}
**Task:**
Copy the above code and place it under the `` "Videos" element. Remember to indent properly.
{% endhint %}
## Finishing Up
Let's add some more code to our website to finish all of the blank sections.
{% hint style="success" %}
**Task:**
Turn the following bullet points into an unordered list, and place it under the `` "Features" element.
* Body length of 21–23 cm
* Has a mask on the face. Males have black masks, while females have grey
* Male is bright red; female is reddish olive grey
Add the following text as a `
`under the `
` "Natural Environment" element.
`Northern Cardinals generally live in woodlands, gardens, shrublands, and wetlands.`
Show your final product to your mentor for your last quality check!
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://sbdojo.gitbook.io/sushi-cards/2021-2022/session-1/make-a-website/day-1/introduction-to-html.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
`, etc. How does the text change as the heading number change?
{% endhint %}
## Divs
The `` element is the most popular element in HTML, and is short for "division." ``s are used to **divide your code into sections**.
While ``s themselves do not change how the website renders, we can give them custom styles with CSS (which we will learn about later). Applying a "style" to a `` element will **apply the same style to every element within its tags**, making it useful for adding color to your website.
Here's an example of using ``s:
```markup
The Northern Cardinal
About
Species
Features
Habitat and Location
High-Populated Locations
Natural Environment
Media
Images
Videos
```
This example is the skeleton of a website dedicated to the Northern Cardinal.
``s are used to separate the introduction, the location, and the media aspects of this website. Notice how an `` element is used to give the website a **main title**.
``s can enclose any elements, including text and images. Remember to **indent two spaces** when you nest elements inside ``s to improve readability.
{% hint style="success" %}
**Task**:
Delete all existing code in your Repl, and copy/paste the code above. Update the website to see how it displays. Now, remove the ``s but keep their content untouched. Does the website preview look different with or without ``s? After that, delete all code and re-paste the above snippet, including the ``s.
{% endhint %}
## Attributes
If you want to expand on how an element works, we can use what are called attributes! Attributes are teeny bits of info that we add onto elements to change how they work.
Here is a diagram:
Notice how the opening tag of the `` above has some text right before the "`>`." That is called an attribute, and in this case, it is the `id` attribute.
This attribute doesn't really change how the code is rendered, but it does make it easier for people reading and editing your code (like your mentor!) to tell what it all means.
Attributes are generally used in combination with CSS to tell the website how certain elements should look (e.g changing font size, color, line spacing, etc). For now, we'll stick to using the `id` attribute to give descriptions to each of our ``s.
{% hint style="success" %}
**Task:**
Give the first `` an `id` attribute of "introduction." Give the second an `id` of "habitat." Give the third an `id` of "media." Call over your mentor to double check your work.
{% endhint %}
## Stylizing Text
So far, all of our text (both headings and paragraphs) have been in normal font. What if we want to add more emphasis to our text, like **bolded/***italicized* words, and bullet points/numbered lists?
{% hint style="success" %}
**Task:**
Let's setup some text in our "Introduction to HTML" website to experiment with.
1. Copy the following text:\
`The northern cardinal (Cardinalis cardinalis) can be found in southeastern Canada, the southeastern United States (from Maine to Texas), and south through Mexico, Belize, and Guatemala. Its conservation status is "Least Concern."`
2. Put that text as a `` element directly under the `
` "About" element in your document.
{% endhint %}
### Bold and Italics
Click the "Bold" and "Italics" tabs below to learn how to use both text styles.
{% tabs %}
{% tab title="Bold" %}
To bold text in HTML, put the \ tags around the specific words. For example:
```markup
This is an example sentence with bolded words
```
The above will render as "This is an example sentence with **bolded** words" on the website.
{% endtab %}
{% tab title="Italics" %}
To italicize text in HTML, put the \ tags (short for emphasis) around the specific words. For example:
```markup
This is an example sentence with italicized words
```
The above will render as "This is an example sentence with *italicized* words" on the website.
{% endtab %}
{% endtabs %}
{% hint style="success" %}
**Task:**
In your Repl document, italicize the words "Cardinalis cardinalis" (which is the scientific name for the northern cardinal). Bold the words "Least Concern" (which means that the northern cardinal is not a threatened/endangered species). \
\
Update your preview to see what happened. Is the effect expected? Does it look like your code is broken? Is it throwing errors everywhere? Come to a mentor if you're having questions.
{% endhint %}
### Unordered and Ordered Lists
In HTML, there are two versions of lists.
{% tabs %}
{% tab title="Ordered" %}
Ordered lists look like this:
1. This
2. Is
3. An
4. Ordered
5. List
To use ordered lists, keep list items `` as children within an overall `` element. E.g:
```markup
- This
- Is
- An
- Ordered
- List
```
This will render a numbered list similar to the above.
{% endtab %}
{% tab title="Unordered" %}
Unordered lists look like this:
* This
* Is
* An
* Unordered
* List
Unordered lists are not *always* bulleted. Some browsers display them as dashed lists, like below:
\- This\
\- Is\
\- An\
\- Unordered/Dashed\
\- List
To use unordered lists in your website, keep list items `- ` as children within an overall `
` element. E.g:
```markup
- This
- Is
- An
- Unordered
- List
```
This will render a bullet-point-like list similar to the above.
{% endtab %}
{% endtabs %}
{% hint style="success" %}
**Task:**
Make an **unordered** list under the \ "Species" element containing the following entries:
* C. c. phillipsi
* C. c. clintoni
* C. c. seftoni
* C. c. townsendi
* C. c. flammiger
Make an **ordered** list under the \ "High-Populated Locations" containing the following entries:
1. United States
2. Canada
3. Mexico
4. Guatemala
5. Belize
6. Bermuda (introduced)
7. Hawaii (introduced)
Update the website preview to see if your code works.
{% endhint %}
## Images
So far, our entire website has just been one massive block of text. Let's add some images to give it some flavor!
Images are put in HTML by using the `![]()
` element. Unlike most elements, the `![]()
`only has an opening tag. There is no "``" in HTML.
To use an `![]()
` tag, you need to combine it with an "`src`," "`width`," and/or "`height`" attributes.
```markup
```
The above code means it is taking an example image (we will get to this next), and forcing it to have a height of 500 pixels.
In our example website, we will use 2 images (and one video later on :D). Please download the images and videos to your **Desktop** from [this Google Drive folder](https://drive.google.com/drive/folders/1KNQ1Xu5WQK5kgQxDkFTO9FlXcphtfThm?usp=sharing).
On Repl, look at the Files panel on the left side of the screen. Click the "Add Folder" icon as shown below.
Name the folder "assets" and click inside of it. Click the three dots as shown and click "Upload file."
Upload each individual file into your project. Drag those three files into your assets folder. It should now look like this:
If you're having difficulty, please reread the instructions or talk to a mentor,
Next, click back into your `index.html` file and add the following code to right under the `` "Images" in the Media section.
```markup
![]()
![]()
```
Notice how we didn't include a `width` attribute. This is because if we include just the height, the computer will calculate and apply a width that keeps the original proportions of the image.
Notice how the `src` field is blank. `src` is essentially a "link" to your files. Since our images are stored in the assets folder, our link to each file is `/assets/filename.jpg`, where "filename" is the name of the image. In the following task, you will add the necessary code to the `src`.
{% tabs %}
{% tab title="Instructions" %}
**Task:**
Add the cardinal-pair.jpg link to the first `![]()
` tag. Add the cardinal-with-raspberries.jpg link to the second. \
\
Remember to add the "`/assets/`" to the beginning of the filename, since we put the files in an assets folder.
When you think you did it right, preview the page. Do the images look stretched? Do the images just not appear at all? Try changing some stuff. If you're still stuck, you can look at the above tab labeled "Code" to help.
Once finished, show your code to a mentor to double check that everything is correct.
{% endtab %}
{% tab title="Code" %}
```markup
```
{% endtab %}
{% endtabs %}
## Videos
As mentioned before, we can also add videos to our code!
Unlike images, videos have both an opening tag and a closing tag as shown below:
```markup
Video from https://www.youtube.com/watch?v=05POu0uob4Y.
```
`src` and `height` are self-explanatory, but what is controls? What is "Video not supported"?
* **Controls:** Adding the word "controls" before the closing angle bracket of the opening tag makes it so that the video player appears with controls (e.g play/pause, volume) rather than just the video itself.
* **Video not supported:** This text will render in the event that the browser fails to access the video.
The paragraph element is just providing the source of the video (a YouTube video). It isn't anything special.
{% hint style="success" %}
**Task:**
Copy the above code and place it under the `` "Videos" element. Remember to indent properly.
{% endhint %}
## Finishing Up
Let's add some more code to our website to finish all of the blank sections.
{% hint style="success" %}
**Task:**
Turn the following bullet points into an unordered list, and place it under the `` "Features" element.
* Body length of 21–23 cm
* Has a mask on the face. Males have black masks, while females have grey
* Male is bright red; female is reddish olive grey
Add the following text as a `
`under the `
` "Natural Environment" element.
`Northern Cardinals generally live in woodlands, gardens, shrublands, and wetlands.`
Show your final product to your mentor for your last quality check!
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://sbdojo.gitbook.io/sushi-cards/2021-2022/session-1/make-a-website/day-1/introduction-to-html.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
`s are used to **divide your code into sections**.
While `
`s themselves do not change how the website renders, we can give them custom styles with CSS (which we will learn about later). Applying a "style" to a `
` element will **apply the same style to every element within its tags**, making it useful for adding color to your website.
Here's an example of using `
`s:
```markup
```
This example is the skeleton of a website dedicated to the Northern Cardinal.
`
The Northern Cardinal
About
Species
Features
Habitat and Location
High-Populated Locations
Natural Environment
Media
Images
Videos
`s are used to separate the introduction, the location, and the media aspects of this website. Notice how an `` element is used to give the website a **main title**.
`
` element is used to give the website a **main title**.
``s can enclose any elements, including text and images. Remember to **indent two spaces** when you nest elements inside ``s to improve readability.
{% hint style="success" %}
**Task**:
Delete all existing code in your Repl, and copy/paste the code above. Update the website to see how it displays. Now, remove the ``s but keep their content untouched. Does the website preview look different with or without ``s? After that, delete all code and re-paste the above snippet, including the ``s.
{% endhint %}
## Attributes
If you want to expand on how an element works, we can use what are called attributes! Attributes are teeny bits of info that we add onto elements to change how they work.
Here is a diagram:
Notice how the opening tag of the `` above has some text right before the "`>`." That is called an attribute, and in this case, it is the `id` attribute.
This attribute doesn't really change how the code is rendered, but it does make it easier for people reading and editing your code (like your mentor!) to tell what it all means.
Attributes are generally used in combination with CSS to tell the website how certain elements should look (e.g changing font size, color, line spacing, etc). For now, we'll stick to using the `id` attribute to give descriptions to each of our ``s.
{% hint style="success" %}
**Task:**
Give the first `` an `id` attribute of "introduction." Give the second an `id` of "habitat." Give the third an `id` of "media." Call over your mentor to double check your work.
{% endhint %}
## Stylizing Text
So far, all of our text (both headings and paragraphs) have been in normal font. What if we want to add more emphasis to our text, like **bolded/***italicized* words, and bullet points/numbered lists?
{% hint style="success" %}
**Task:**
Let's setup some text in our "Introduction to HTML" website to experiment with.
1. Copy the following text:\
`The northern cardinal (Cardinalis cardinalis) can be found in southeastern Canada, the southeastern United States (from Maine to Texas), and south through Mexico, Belize, and Guatemala. Its conservation status is "Least Concern."`
2. Put that text as a `` element directly under the `
` "About" element in your document.
{% endhint %}
### Bold and Italics
Click the "Bold" and "Italics" tabs below to learn how to use both text styles.
{% tabs %}
{% tab title="Bold" %}
To bold text in HTML, put the \ tags around the specific words. For example:
```markup
This is an example sentence with bolded words
```
The above will render as "This is an example sentence with **bolded** words" on the website.
{% endtab %}
{% tab title="Italics" %}
To italicize text in HTML, put the \ tags (short for emphasis) around the specific words. For example:
```markup
This is an example sentence with italicized words
```
The above will render as "This is an example sentence with *italicized* words" on the website.
{% endtab %}
{% endtabs %}
{% hint style="success" %}
**Task:**
In your Repl document, italicize the words "Cardinalis cardinalis" (which is the scientific name for the northern cardinal). Bold the words "Least Concern" (which means that the northern cardinal is not a threatened/endangered species). \
\
Update your preview to see what happened. Is the effect expected? Does it look like your code is broken? Is it throwing errors everywhere? Come to a mentor if you're having questions.
{% endhint %}
### Unordered and Ordered Lists
In HTML, there are two versions of lists.
{% tabs %}
{% tab title="Ordered" %}
Ordered lists look like this:
1. This
2. Is
3. An
4. Ordered
5. List
To use ordered lists, keep list items `` as children within an overall `` element. E.g:
```markup
- This
- Is
- An
- Ordered
- List
```
This will render a numbered list similar to the above.
{% endtab %}
{% tab title="Unordered" %}
Unordered lists look like this:
* This
* Is
* An
* Unordered
* List
Unordered lists are not *always* bulleted. Some browsers display them as dashed lists, like below:
\- This\
\- Is\
\- An\
\- Unordered/Dashed\
\- List
To use unordered lists in your website, keep list items `- ` as children within an overall `
` element. E.g:
```markup
- This
- Is
- An
- Unordered
- List
```
This will render a bullet-point-like list similar to the above.
{% endtab %}
{% endtabs %}
{% hint style="success" %}
**Task:**
Make an **unordered** list under the \ "Species" element containing the following entries:
* C. c. phillipsi
* C. c. clintoni
* C. c. seftoni
* C. c. townsendi
* C. c. flammiger
Make an **ordered** list under the \ "High-Populated Locations" containing the following entries:
1. United States
2. Canada
3. Mexico
4. Guatemala
5. Belize
6. Bermuda (introduced)
7. Hawaii (introduced)
Update the website preview to see if your code works.
{% endhint %}
## Images
So far, our entire website has just been one massive block of text. Let's add some images to give it some flavor!
Images are put in HTML by using the `![]()
` element. Unlike most elements, the `![]()
`only has an opening tag. There is no "``" in HTML.
To use an `![]()
` tag, you need to combine it with an "`src`," "`width`," and/or "`height`" attributes.
```markup
```
The above code means it is taking an example image (we will get to this next), and forcing it to have a height of 500 pixels.
In our example website, we will use 2 images (and one video later on :D). Please download the images and videos to your **Desktop** from [this Google Drive folder](https://drive.google.com/drive/folders/1KNQ1Xu5WQK5kgQxDkFTO9FlXcphtfThm?usp=sharing).
On Repl, look at the Files panel on the left side of the screen. Click the "Add Folder" icon as shown below.
Name the folder "assets" and click inside of it. Click the three dots as shown and click "Upload file."
Upload each individual file into your project. Drag those three files into your assets folder. It should now look like this:
If you're having difficulty, please reread the instructions or talk to a mentor,
Next, click back into your `index.html` file and add the following code to right under the `` "Images" in the Media section.
```markup
![]()
![]()
```
Notice how we didn't include a `width` attribute. This is because if we include just the height, the computer will calculate and apply a width that keeps the original proportions of the image.
Notice how the `src` field is blank. `src` is essentially a "link" to your files. Since our images are stored in the assets folder, our link to each file is `/assets/filename.jpg`, where "filename" is the name of the image. In the following task, you will add the necessary code to the `src`.
{% tabs %}
{% tab title="Instructions" %}
**Task:**
Add the cardinal-pair.jpg link to the first `![]()
` tag. Add the cardinal-with-raspberries.jpg link to the second. \
\
Remember to add the "`/assets/`" to the beginning of the filename, since we put the files in an assets folder.
When you think you did it right, preview the page. Do the images look stretched? Do the images just not appear at all? Try changing some stuff. If you're still stuck, you can look at the above tab labeled "Code" to help.
Once finished, show your code to a mentor to double check that everything is correct.
{% endtab %}
{% tab title="Code" %}
```markup
```
{% endtab %}
{% endtabs %}
## Videos
As mentioned before, we can also add videos to our code!
Unlike images, videos have both an opening tag and a closing tag as shown below:
```markup
Video from https://www.youtube.com/watch?v=05POu0uob4Y.
```
`src` and `height` are self-explanatory, but what is controls? What is "Video not supported"?
* **Controls:** Adding the word "controls" before the closing angle bracket of the opening tag makes it so that the video player appears with controls (e.g play/pause, volume) rather than just the video itself.
* **Video not supported:** This text will render in the event that the browser fails to access the video.
The paragraph element is just providing the source of the video (a YouTube video). It isn't anything special.
{% hint style="success" %}
**Task:**
Copy the above code and place it under the `` "Videos" element. Remember to indent properly.
{% endhint %}
## Finishing Up
Let's add some more code to our website to finish all of the blank sections.
{% hint style="success" %}
**Task:**
Turn the following bullet points into an unordered list, and place it under the `` "Features" element.
* Body length of 21–23 cm
* Has a mask on the face. Males have black masks, while females have grey
* Male is bright red; female is reddish olive grey
Add the following text as a `
`under the `
` "Natural Environment" element.
`Northern Cardinals generally live in woodlands, gardens, shrublands, and wetlands.`
Show your final product to your mentor for your last quality check!
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://sbdojo.gitbook.io/sushi-cards/2021-2022/session-1/make-a-website/day-1/introduction-to-html.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
`s to improve readability.
{% hint style="success" %}
**Task**:
Delete all existing code in your Repl, and copy/paste the code above. Update the website to see how it displays. Now, remove the `
`s but keep their content untouched. Does the website preview look different with or without `
`s? After that, delete all code and re-paste the above snippet, including the `
`s.
{% endhint %}
## Attributes
If you want to expand on how an element works, we can use what are called attributes! Attributes are teeny bits of info that we add onto elements to change how they work.
Here is a diagram:
Notice how the opening tag of the `
` above has some text right before the "`>`." That is called an attribute, and in this case, it is the `id` attribute.
This attribute doesn't really change how the code is rendered, but it does make it easier for people reading and editing your code (like your mentor!) to tell what it all means.
Attributes are generally used in combination with CSS to tell the website how certain elements should look (e.g changing font size, color, line spacing, etc). For now, we'll stick to using the `id` attribute to give descriptions to each of our `
`s.
{% hint style="success" %}
**Task:**
Give the first `
` an `id` attribute of "introduction." Give the second an `id` of "habitat." Give the third an `id` of "media." Call over your mentor to double check your work.
{% endhint %}
## Stylizing Text
So far, all of our text (both headings and paragraphs) have been in normal font. What if we want to add more emphasis to our text, like **bolded/***italicized* words, and bullet points/numbered lists?
{% hint style="success" %}
**Task:**
Let's setup some text in our "Introduction to HTML" website to experiment with.
1. Copy the following text:\
`The northern cardinal (Cardinalis cardinalis) can be found in southeastern Canada, the southeastern United States (from Maine to Texas), and south through Mexico, Belize, and Guatemala. Its conservation status is "Least Concern."`
2. Put that text as a `` "About" element in your document.
{% endhint %}
### Bold and Italics
Click the "Bold" and "Italics" tabs below to learn how to use both text styles.
{% tabs %}
{% tab title="Bold" %}
To bold text in HTML, put the \ tags around the specific words. For example:
```markup
` element directly under the `
` "About" element in your document.
{% endhint %}
### Bold and Italics
Click the "Bold" and "Italics" tabs below to learn how to use both text styles.
{% tabs %}
{% tab title="Bold" %}
To bold text in HTML, put the \ tags around the specific words. For example:
```markup
This is an example sentence with bolded words
```
The above will render as "This is an example sentence with **bolded** words" on the website.
{% endtab %}
{% tab title="Italics" %}
To italicize text in HTML, put the \ tags (short for emphasis) around the specific words. For example:
```markup
This is an example sentence with italicized words
```
The above will render as "This is an example sentence with *italicized* words" on the website.
{% endtab %}
{% endtabs %}
{% hint style="success" %}
**Task:**
In your Repl document, italicize the words "Cardinalis cardinalis" (which is the scientific name for the northern cardinal). Bold the words "Least Concern" (which means that the northern cardinal is not a threatened/endangered species). \
\
Update your preview to see what happened. Is the effect expected? Does it look like your code is broken? Is it throwing errors everywhere? Come to a mentor if you're having questions.
{% endhint %}
### Unordered and Ordered Lists
In HTML, there are two versions of lists.
{% tabs %}
{% tab title="Ordered" %}
Ordered lists look like this:
1. This
2. Is
3. An
4. Ordered
5. List
To use ordered lists, keep list items `` as children within an overall `` element. E.g:
```markup
- This
- Is
- An
- Ordered
- List
```
This will render a numbered list similar to the above.
{% endtab %}
{% tab title="Unordered" %}
Unordered lists look like this:
* This
* Is
* An
* Unordered
* List
Unordered lists are not *always* bulleted. Some browsers display them as dashed lists, like below:
\- This\
\- Is\
\- An\
\- Unordered/Dashed\
\- List
To use unordered lists in your website, keep list items `- ` as children within an overall `
` element. E.g:
```markup
- This
- Is
- An
- Unordered
- List
```
This will render a bullet-point-like list similar to the above.
{% endtab %}
{% endtabs %}
{% hint style="success" %}
**Task:**
Make an **unordered** list under the \ "Species" element containing the following entries:
* C. c. phillipsi
* C. c. clintoni
* C. c. seftoni
* C. c. townsendi
* C. c. flammiger
Make an **ordered** list under the \ "High-Populated Locations" containing the following entries:
1. United States
2. Canada
3. Mexico
4. Guatemala
5. Belize
6. Bermuda (introduced)
7. Hawaii (introduced)
Update the website preview to see if your code works.
{% endhint %}
## Images
So far, our entire website has just been one massive block of text. Let's add some images to give it some flavor!
Images are put in HTML by using the `![]()
` element. Unlike most elements, the `![]()
`only has an opening tag. There is no "``" in HTML.
To use an `![]()
` tag, you need to combine it with an "`src`," "`width`," and/or "`height`" attributes.
```markup
```
The above code means it is taking an example image (we will get to this next), and forcing it to have a height of 500 pixels.
In our example website, we will use 2 images (and one video later on :D). Please download the images and videos to your **Desktop** from [this Google Drive folder](https://drive.google.com/drive/folders/1KNQ1Xu5WQK5kgQxDkFTO9FlXcphtfThm?usp=sharing).
On Repl, look at the Files panel on the left side of the screen. Click the "Add Folder" icon as shown below.
Name the folder "assets" and click inside of it. Click the three dots as shown and click "Upload file."
Upload each individual file into your project. Drag those three files into your assets folder. It should now look like this:
If you're having difficulty, please reread the instructions or talk to a mentor,
Next, click back into your `index.html` file and add the following code to right under the `` "Images" in the Media section.
```markup
![]()
![]()
```
Notice how we didn't include a `width` attribute. This is because if we include just the height, the computer will calculate and apply a width that keeps the original proportions of the image.
Notice how the `src` field is blank. `src` is essentially a "link" to your files. Since our images are stored in the assets folder, our link to each file is `/assets/filename.jpg`, where "filename" is the name of the image. In the following task, you will add the necessary code to the `src`.
{% tabs %}
{% tab title="Instructions" %}
**Task:**
Add the cardinal-pair.jpg link to the first `![]()
` tag. Add the cardinal-with-raspberries.jpg link to the second. \
\
Remember to add the "`/assets/`" to the beginning of the filename, since we put the files in an assets folder.
When you think you did it right, preview the page. Do the images look stretched? Do the images just not appear at all? Try changing some stuff. If you're still stuck, you can look at the above tab labeled "Code" to help.
Once finished, show your code to a mentor to double check that everything is correct.
{% endtab %}
{% tab title="Code" %}
```markup
```
{% endtab %}
{% endtabs %}
## Videos
As mentioned before, we can also add videos to our code!
Unlike images, videos have both an opening tag and a closing tag as shown below:
```markup
Video from https://www.youtube.com/watch?v=05POu0uob4Y.
```
`src` and `height` are self-explanatory, but what is controls? What is "Video not supported"?
* **Controls:** Adding the word "controls" before the closing angle bracket of the opening tag makes it so that the video player appears with controls (e.g play/pause, volume) rather than just the video itself.
* **Video not supported:** This text will render in the event that the browser fails to access the video.
The paragraph element is just providing the source of the video (a YouTube video). It isn't anything special.
{% hint style="success" %}
**Task:**
Copy the above code and place it under the `` "Videos" element. Remember to indent properly.
{% endhint %}
## Finishing Up
Let's add some more code to our website to finish all of the blank sections.
{% hint style="success" %}
**Task:**
Turn the following bullet points into an unordered list, and place it under the `` "Features" element.
* Body length of 21–23 cm
* Has a mask on the face. Males have black masks, while females have grey
* Male is bright red; female is reddish olive grey
Add the following text as a `
`under the `
` "Natural Environment" element.
`Northern Cardinals generally live in woodlands, gardens, shrublands, and wetlands.`
Show your final product to your mentor for your last quality check!
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://sbdojo.gitbook.io/sushi-cards/2021-2022/session-1/make-a-website/day-1/introduction-to-html.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
- ` element. E.g:
```markup
- This
- Is
- An
- Ordered
- List
- ` as children within an overall `
- ` element. E.g:
```markup
- This
- Is
- An
- Unordered
- List
"Species" element containing the following entries: * C. c. phillipsi * C. c. clintoni * C. c. seftoni * C. c. townsendi * C. c. flammiger Make an **ordered** list under the \
"High-Populated Locations" containing the following entries: 1. United States 2. Canada 3. Mexico 4. Guatemala 5. Belize 6. Bermuda (introduced) 7. Hawaii (introduced) Update the website preview to see if your code works. {% endhint %} ## Images So far, our entire website has just been one massive block of text. Let's add some images to give it some flavor! Images are put in HTML by using the `
` element. Unlike most elements, the `
`only has an opening tag. There is no "``" in HTML. To use an `
` tag, you need to combine it with an "`src`," "`width`," and/or "`height`" attributes. ```markup
```
The above code means it is taking an example image (we will get to this next), and forcing it to have a height of 500 pixels.
In our example website, we will use 2 images (and one video later on :D). Please download the images and videos to your **Desktop** from [this Google Drive folder](https://drive.google.com/drive/folders/1KNQ1Xu5WQK5kgQxDkFTO9FlXcphtfThm?usp=sharing).
On Repl, look at the Files panel on the left side of the screen. Click the "Add Folder" icon as shown below.
Name the folder "assets" and click inside of it. Click the three dots as shown and click "Upload file."
Upload each individual file into your project. Drag those three files into your assets folder. It should now look like this:
If you're having difficulty, please reread the instructions or talk to a mentor,
Next, click back into your `index.html` file and add the following code to right under the `` "Images" in the Media section. ```markup
``` Notice how we didn't include a `width` attribute. This is because if we include just the height, the computer will calculate and apply a width that keeps the original proportions of the image. Notice how the `src` field is blank. `src` is essentially a "link" to your files. Since our images are stored in the assets folder, our link to each file is `/assets/filename.jpg`, where "filename" is the name of the image. In the following task, you will add the necessary code to the `src`. {% tabs %} {% tab title="Instructions" %} **Task:** Add the cardinal-pair.jpg link to the first `
` tag. Add the cardinal-with-raspberries.jpg link to the second. \ \ Remember to add the "`/assets/`" to the beginning of the filename, since we put the files in an assets folder. When you think you did it right, preview the page. Do the images look stretched? Do the images just not appear at all? Try changing some stuff. If you're still stuck, you can look at the above tab labeled "Code" to help. Once finished, show your code to a mentor to double check that everything is correct. {% endtab %} {% tab title="Code" %} ```markup
```
{% endtab %}
{% endtabs %}
## Videos
As mentioned before, we can also add videos to our code!
Unlike images, videos have both an opening tag and a closing tag as shown below:
```markup
Video from https://www.youtube.com/watch?v=05POu0uob4Y.
``` `src` and `height` are self-explanatory, but what is controls? What is "Video not supported"? * **Controls:** Adding the word "controls" before the closing angle bracket of the opening tag makes it so that the video player appears with controls (e.g play/pause, volume) rather than just the video itself. * **Video not supported:** This text will render in the event that the browser fails to access the video. The paragraph element is just providing the source of the video (a YouTube video). It isn't anything special. {% hint style="success" %} **Task:** Copy the above code and place it under the `` "Videos" element. Remember to indent properly. {% endhint %} ## Finishing Up Let's add some more code to our website to finish all of the blank sections. {% hint style="success" %} **Task:** Turn the following bullet points into an unordered list, and place it under the `
` "Features" element. * Body length of 21–23 cm * Has a mask on the face. Males have black masks, while females have grey * Male is bright red; female is reddish olive grey Add the following text as a `
`under the `
` "Natural Environment" element. `Northern Cardinals generally live in woodlands, gardens, shrublands, and wetlands.` Show your final product to your mentor for your last quality check! {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://sbdojo.gitbook.io/sushi-cards/2021-2022/session-1/make-a-website/day-1/introduction-to-html.md?ask=
``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.