【解決方法】指定された要素に仕切りを追加するにはどうすればよいですか

[ad_1]

# Lab Instructions: Create and style a webpage

In this exercise you will you will practice building your webpage using HTML and CSS.<br><br>

> ### **Tips: Before you Begin**
> #### **To view your code and instructions side-by-side**, select the following in your VSCode toolbar:
> - View -> Editor Layout -> Two Columns
> - To view this file in Preview mode, right click on this README.md file and `Open Preview`
> - Select your code file in the code tree, which will open it up in a new VSCode tab.
> - Drag your assessment code files over to the second column. 
> - Great work! You can now see instructions and code at the same time. 
 <br><br> 
 
<br>

## Task 1: Create the HTML file. 

Objectives
- Add  photo.jpg to the webpage.
- Add your name as a heading to the webpage.
- Add an unordered list of your five favorite music artists.
- Add an ordered list of your top five favorite films.
- Add a hyperlink to your Facebook profile, or, meta.com.

Follow the Step by Step instructions below:

1. Open the `index.html` file and set up the following basic HTML document structure:
    ```HTML
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    </body>
    </html>
    ```

2. Set the title of the HTML document to your name:
    ```HTML
    <!DOCTYPE html>
    <html>
    <head>
        <title>your name</title>
    </head>
    <body>
    </body>
    </html>
    ```

3. Link to `styles.css` in the `head` element.

4. Add five divider elements to the `body` element.

5. Add a heading 1 to the first divider element that displays your name.

6. Add `photo.jpg` using an image element in the second divider element..  

7. Add an ID attribute with the value `photo` on the image element.

8. Add a heading 2 for `Favorite Music Artists` in the third divider element. In the same divider add an unordered list with your top 5 favorite artists.

9. Add a heading 2 for `Favorite Films` in the fourth divider element. In the same divider add an ordered list with your top 5 favorite films.

10. Add a hyperlink to your Facebook profile page in the last divider element. Alternatively, add a hyperlink to `https://www.meta.com/`. As a last step, add `My Profile` to the descriptive text of the `<a>` tag. 


<br>

## Task 2: Style the webpage using CSS.

Objectives
- Style the webpage using CSS.

Follow the Step by Step instructions below:

1. Open the `styles.css ` file.

2. Add a CSS rule for your image that sets the `border` property to `2` pixels wide with a `solid blue` color.

3. Add a CSS rule for heading 1 containing your name and set its color to `blue`.

4. Add a CSS rule for all `<h2>` headings and set their color to `grey`.

5. Add a CSS rule that applies a `margin` of `4` pixels to the divider elements.

私が試したこと：

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="styles.css">
    <title>your name</title>
</head>

<body>
    
</body>

</html>

解決策 1

私たちは立ち往生している人々を喜んで助けますが、それは私たちがあなたのためにすべてをするためにここにいるという意味ではありません! 私たちがすべての作業を行うことはできません。あなたはこれに対して報酬を受け取っているか、またはそれはあなたの成績の一部であり、私たちがあなたのためにすべてを行うことはまったく公平ではありません.

だから私たちはあなたが仕事をする必要があり、あなたが行き詰まったときにあなたを助けます. それは、あなたが提出できる段階的な解決策を提供するという意味ではありません!
現在の状況と、プロセスの次のステップを説明することから始めます。次に、その次のステップを機能させるために何を試みたか、またその際に何が起こったかを教えてください。

開始するのに問題がある場合は、これが役立つ場合があります。問題を解決するためのコードの書き方、初心者向けガイド[^]

[ad_2]