Tìm hiểu hiển thị TEXT trong HTML5 và CSS - Phần basic

Bài tập ôn luyện tiếp theo về Text.

Tìm hiểu hiển thị TEXT trong HTML5 và CSS - Phần advanced

Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

hohuy1610@gmail.com

2021-11-17 09:06:51

https://github.com/HoGiaHuy2003/C2108L-HTML-CSS-JS/tree/master/day-3/bt1553/grammar

Cao Thái Tuân

2021-11-15 01:55:10

#Grammar.html

<!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">
    <link rel="stylesheet" href="./css/styles.css">
    <title>English Grammar</title>
</head>
<body>
    <div class="section">
        <h2>NOUNS</h2>
        <p> A <b>noun</b> represents a person, place, animal, thing or an idea. </p>
    </div>

    <div class="sub_section">
        <h3> Kinds of noun</h3>
        <p>Nouns  are  class....:</p>
        <ul>
            <li><b>Phoper</b>:Is is the name of.....</li>
            <li><b>Common</b>:Is is the name possesesed..</li>
            <li></li>
            <li><b>Abstract</b>: It is the name representing qualities, emotions, conditions or actions.</li>
        </ul>

        <div class="section">
            <h2>PRONOUNS</h2>
            <p>A <b>pronoun</b> is a word used in place of a noun. A pronoun is generally used to avoid repetition of a noun.</p>
        </div>

        <div class="sub_section">
            <h3> Kinds of pronouns</h3>
            <p>Pronouns  are  class....:</p>
            <ul>
                <li><b>Interrogative pronouns</b>:Is stands as the answer to.....</li>
                <li><b>Indefinite pronouns</b>: It's used to refer to a person, ...</li>
                <li><b>Relative pronouns</b>: It relates to a noun, pronoun....</li>
                <li><b>Demonstrative pronouns</b>: A nouns or pronoun is specified and identified by it...</li>
                <li><b>Reflexive pronouns</b>: It usually follows a noun or a pronoun...</li>
            </ul>



    </div>

    

    
</body>
</html>

#styles.css

*{
    padding: 0;
    margin: 0;
}
.section h2{
    text-decoration:underline;
    text-align: justify;
    margin-left: 15px;
    text-transform:uppercase;
    margin-top: 20px ;
}

.section >p{
    text-align:justify;
    margin-left: 15px;
    padding-top: 20px;
}
.sub_section h3{
    text-decoration:underline;
    text-align: justify;
    margin-left: 5%;
    text-transform:uppercase;
}
.sub_section >p{
    margin-left: 5%;
    margin-top: 10px ; 
    text-align: justify;
}
.sub_section ul>li{
    margin-left: 10%;
    margin-top: 20px ;
    list-style: none;
    font-family:cursive ;
    text-align: justify;
}

Ngô Quang Huy

2021-11-13 09:20:01

#Grammar.html

<!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>English Grammar</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2 class="section">NOUNS</h2>
    <p class="section">A <B>noun</B> represents a person, place, animal, thing or an idea.</p>
    <h3 class="sub_section">Kinds of noun</h3>
    <p class="sub_section">Nouns are classified as follows:</p>
    <ul class="sub_section" style="list-style-type: none;">
        <li><b>Prober:</b> It is the name of particular object, whether person, place, animal, idea, or thing.</li>
        <li><b>common:</b> It is the name possessed by things in general.</li>
        <li><b>Collective:</b> It is the name representing a group of things.</li>
        <li><b>Abstract:</b> It is the name representing qualities, emotions, conditions or actions.</li>
    </ul>
    <h2 class="section">pronouns</h2>
    <p class="section">A <b>pronoun</b> is a word used in place of a noun. A pronoun is generally used to avoid repetition of a noun.</p>
    <h3 class="sub_section"> Kinds of noun</h3>
    <p class="sub_section">Pronouns are classified as follows:</p>
    <ul class="sub_section" style="list-style-type: none;">
        <li><b>Personal pronouns:</b> It refers to a specific noun and used as a substitute of the noun.</li>
        <li><b>Interrogative pronouns:</b> It stands as the answer to the question about a person, place or a thing.</li>
        <li><b>Indefinite pronouns:</b> It is used to refer to a person,thing or a place that are unknown.</li>
        <li><b>Relative pronouns:</b> It relates to a noun, pronoun, word or expression preceding it in the sentence, and at the same time connects two statements.</li>
        <li><b>Demonstrative pronouns:</b> A noun or pronoun is specified and identified by it.</li>
        <li><b>reflexive pronouns:</b> It usually follows a noun or pronoun and used to emphasize the subject.</li>
    </ul>
</body>
</html>

#style.css

.section{
    text-align: justify;
}
.sub_section{
    text-indent: 5%;
    text-align: justify;
}

h2{
    text-align: left;
    letter-spacing: 2px;
    text-decoration-line: underline;
    text-transform: capitalize;
}
h3{
    text-align: left;
    letter-spacing: 2px;
    text-decoration-line: underline;
    text-transform: capitalize;
}

Dương Văn Hoàng

2021-11-13 07:09:20

#Grammar.html

<!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>English Grammar</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h2 class="section">NOUNS</h2>
    <p class="section">A <b>noun</b> represents a person, place, animal, thing or an idea.</p>
    <h3 class="sub_section">kind of nouns</h3>
    <p class="sub_section">Nonus are classified as follow:</p>
    <ul class="sub_section" style="list-style-type: none;">
        <li><b>Proper:</b> It is the name of the particular object, whether person, place, animal, idea or thing.</li>
        <li><b>Common:</b> It is the name possessed by things in general.</li>
        <li><b>Gollective:</b> It is the name representing a group of things.</li>
        <li><b>Abstract:</b> It is the name representing qualities, emotions, conditions or actions.</li>
    </ul>
    <h2 class="section">pronouns</h2>
    <p class="section">A <b>pronoun</b> is a word used in place of a noun. A pronoun is generally used to avoid repetition of a noun.</p>
    <h3 class="sub_section">kind of pronoun</h3>
    <p class="sub_section">Prononus are classified as follow:</p>
    <ul class="sub_section" style="list-style-type: none;">
        <li><b>Personal:</b> It refers to a specific noun and used as substitute of the noun.</li>
        <li><b>Interrogative prononus:</b> It stands as the answer to the question about a person, place or a thing.</li>
        <li><b>Indefinite prononus:</b> It is used to refer to a person, thing or a place that are unknown.</li>
        <li><b>Relative prononus:</b> It relates to a noun, pronoun, word or expression preceding it in the sentence, and at the same timne connects two statements.</li>
        <li><b>Demonstrative prononus:</b> A noun or pronoun is specified and Identified by it.</li>
        <li><b>Reflexive prononus:</b> It usually follows a noun or a pronoun and used to emphasize the subject.</li>

    </ul>


</body>

</html>

#style.css

.section {
    text-align: justify;
}

.sub_section {
    text-indent: 5%;
    text-align: justify
}

h2 {
    text-align: left;
    text-transform: capitalize;
    text-decoration-line: underline;
    letter-spacing: 2px;
}

h3 {
    text-align: left;
    text-transform: capitalize;
    text-decoration-line: underline;
    letter-spacing: 2px;
}

Cao Tuấn Minh

2021-03-08 00:31:24

.section {
    text-align: justify;
}

.sub_section {
    text-indent: 5%;
    text-align: justify;
}

h2 {
    text-align: left;
    letter-spacing: 2px;
    text-decoration: underline;
    text-transform: uppercase;
}

h3 {
    text-align: left;
    letter-spacing: 2px;
    text-decoration: underline;
    text-transform: uppercase;
}

Cao Tuấn Minh

2021-03-08 00:30:30

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>English Grammar</title>
    <link rel="stylesheet" href="grammar.css">
</head>
<body>
    <h2 class="section">nouns</h2>
        <div class="section">A <B>noun</B> represents a person, place, animal, thing or an idea. </div>
    <h3 class="sub_section">Kinds of noun</h3>
        <p class="sub_section">Nouns are classified as follows:
            <br>
        <div class="sub_section"><b>Proper:</b> It is the name of</div>
        <div class="sub_section"><b>Abstract:</b> It is the name representing qualities, emotions, conditions or actions.</div>
        </p>

    <h2 class="section">pronouns</h2>
        <div class="section">A <b>pronoun</b> is a word used in place of a noun. A pronoun is generally used to avoid repetition of a noun.</div>
    <h3 class="sub_section">Kinds of pronouns</h3>
</body>
</html>