Skip to content

Latest commit

 

History

History
561 lines (467 loc) · 17.4 KB

README.md

File metadata and controls

561 lines (467 loc) · 17.4 KB
<title>Document</title>

This is a Paragraphy

This is a paragraphy that has emphasized text for effect

This is a headline

This is the first paragraph

This is the second paragraph

This third paragraph that has emphasized for effect

1st level

2nd Level

3rd Level

4th Level

5th level
6th Level

My favorite character from Sesame street is Grover

My favorite character from Sesame street is Grover

  • Flour
  • Sugar
  • Baking Powder
  • Salt
  • Non-dairy Milk
  • Vanilla
  1. In a bowl, mix all the dry ingredients
  2. In another bowl, mix together the rest
  3. Wisk together
  4. wait 5 minutes
  5. Cook the pancake

We've gone from having 21 elements in HTML tags that first documen, to having 100 more elementsnow and yet it's still the same language. I find that amazing. It's still the same language that was created 25 years ago. It's grown an extra 100 elements in there, and yet it's still the same language.

-Jeremy Keith

Jeremysaid,You should open an HTML document from back then in a browser today

We can write {color:green;} is our CSS and will apply to anything marked up as an ⁢H4⁢ element.

They
say you took my manhood,
Momma.
come sit on my lap
and tell me,
what do you want to say
to them, just
beforeI amnihilate their ignorance?

- Maya Argelon

[in Just-]

by e.e cummings

    it's
    spring
    and 
        the  

       goat-footed

 ballonMan      whistles
 fav 
 and 
 wee     



    
        ⁢ul>
        ⁢li>Flour⁢li>
        ⁢li>Sugar⁢/li>
        ⁢li>Salt⁢/li>
        
        ul(
            color: teal;
        
        )
        li (
            list-style-type: square;
        )

H20

Something that has a footnote.2

@2019 Fancy Company

Here's an example of a Subscript1and a Superscript2and small text all i one sentence

@2019 Fancy Company
  1. One
  2. Two
  3. Three
  4. Four

For now, remember the four most important Global Attributes: "class," "id," "lang," and "dir."

<style> *{ box-sizing: border-box; } html{ font-family: lora, georgia, serif; margin: 2em; font-size: 160%; line-height: 1.5; } 
    figcaption{
        font-style: italic;
    }
    img{
        width: 100%;
        height: auto;
    }
    
</style>

<p>Here's an example.
  Some people put  two spaces between every sentence.   Like an animal. M 
  I don't know. The computer is not a typewriter
</p>

<!--This is a comment that will be totally ignored
<h1>A headline that's ignored</h1>
-->
<article>
    <p>
        text goes here
    </p>
    <ul>
        <li>One</li>
        <li>Two</li>
    </ul>
    <p>More Text</p>
</article>
<!--Older HTML element from 1990s-->
<p>Hello <i>World</i></p>
<p><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCVIQZSZeKUpe90EaCUfM8-fib8_XfkfiGKw&s" alt=""></p>
<hr>
    <!--Newer HTML element-->
    <article>
        <video controls>
            <source src="">
            <source src="">
        </video>
    </article>
    <p> 
        < > &
    </p>
    <m>
        <p>
            &copy; becomes &copy; 
        </p>

        <a href="https://google.com">This is a Link</a>
        <p>This is a sentence <a href="https://google.com">With a Link </a>In the midset of the text</p>
        <p><a href="https://google.com"><img  src="images.jfif"></a>
        </p>

        <article>
            <a href="https://google.com">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCVIQZSZeKUpe90EaCUfM8-fib8_XfkfiGKw&s">
                <h2>
               Title of the plate 
                </h2>
                <p>

                </p>
            </a>
        </article>

        <nav role="breadcrumb">
            <ol class="breadcrumb">
                <li><a href="/"></a>Home</li>
                <li><a href="/"></a>Bloq</li>
                <li><a href="/"></a>March</li>
                <li>March 9th Update</li>
            </ol>
        </nav>

Kang



Kang

Figcaption and Figures

Kang

Kang is the strongest MCU villain after Thanos

Working With Audio

The audio element is different from the image element because it has both an opening and a closing tag. This makes it more modern and gives it more power and flexibility. Just like the image element, we use a source attribute to provide the URL of the audio file. 

<audio controls>
    <source src="./dog-barks-75750.mp3" type="audio/mp3">
    Your browser does not support the audio element
</audio>

<hr>
<h1>Working With Videos</h1>
<video controls>

    <source src="./14037-254146876_tiny.mp4" type="video/mp4">
    
    <track src="./sample.vtt"
    kind="captions"
    label="English "
    srclang="en"
    default> 

</video>
<iframe 
width="300" 
height="150" 
src="https://www.youtube.com/embed/U2OT6Bhwubc" 
title="Da Capo - Ahoto (Eastern Tribe Mix)" 
frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
referrerpolicy="strict-origin-when-cross-origin" 
allowfullscreen>
</iframe>

HTML Generic Elements, Div and Span

Div is a block-level element, while span is an inline element.

Content Structuring

Main

The main element is used once per webpage and tells the browser where the main content is located.

Header

The header and footer elements mark the header and footer areas on the page. Do not confuse header with head though. Head is where the file's metadata lives and is not displayed to users. Header is used for site headers, article headers, and headers within the content. A header is usually found at the top of most web pages and may include a logo, site name, and navigation.

Footer

The footer signifies that there are extra things to convey, regardless of its position on the page.

Article

An article often starts with a title, subtitle, author's name, and publication date, which can also be considered a header. Many web pages end with a footer at the bottom, containing links, copyright information, and additional details about the company. However, footers can also appear elsewhere. Some articles begin with metadata like hashtags or share buttons, which are suitable for a footer element. The article element wraps around any type of content unit, whether it is a long written article, a short snippet, a teaser card, a tweet, or even an app element. It represents a standalone unit of content.

Section

The section element is used to mark sections of content. For example, in a long essay with subheadings, each segment can be wrapped in a section element. It is also useful for dividing different topic zones on a website. Each section typically starts with its own headline.

Aside

Lastly, the aside element is for content that is off to the side, like sidebar information or additional details that accompany an article but are not part of its main flow. Advertisements can also be marked as an aside. Although the position on the page does not matter, the semantic meaning of these elements is crucial. The visual layout often conveys meaning, and these HTML elements help transfer that meaning from the design to the content.

Form Fundamentals

Version A

Name Email Sign Up 
<section class="Version-B">
    <h2>Version B</h2>
    <form action="success.html" method="get">
        <label>Name</label>
        <input>
        <label>Email</label>
        <input>
        <button>Sign Up</button>
    </form>
</section>

<section class="Version-C">
    <h2>Version C</h2>
    <form action="success.html" method="get">
        <label>Name</label>
        <input name="name">
        <label>Email</label>
        <input name="Email">
        <button>Sign Up</button>
    </form>
</section>

<section class="Version D">
    <h2>Version D</h2>
    <form action="success.html" method="get">
        <label for="name">Name:
            <input name="name" id="name" placeholder="Aphiwe">
        </label>
        
        <label for="Email">Email</label>
        <input name="Email" id="Email">
        <button>Sign Up</button>
    </form>


<form action="success.html" method="get">
    <label>Name:<input name="name"></label>
    <label>Email:<input name="Email"></label>
    <button>Sign Up</button>
</form>
</section>

<section class="Version E">
    <h2>Version E</h2>
    <form action="success.html" method="get">
        <label>Name: <input name="name"></label>
    </form>
    <form action="success.html" method="get">
        <label>Email: <input name="Email"></label>
    </form>
    <button>Sign Up</button>
</section>

<section class="Version F">
    <h2>Version F</h2>
    <form action="success.html" method="get">
        <label>Name: <input name="name"></label>
    </form>
    <form action="success.html" method="get">
        <label>Email: <input name="Email"></label>
    </form>
    <button>Sign Up</button>
</section>

<section class="Version G">
    <h2>Version G</h2>
    <form action="success.html" method="get">
        <label>Name:<input name="name" placeholder="Aphiwe"></label>
    </form>
    <form action="success.html" method="get">
        <label>Email: <input name="Email" placeholder="andrewncama@gmail.com"></label>
    </form>
    <button>Sign Up</button>
</section>
Name: Email: Sign Up
Name Email Password Search Phone Number
Submit

Our Form

Name
Email
Password
Search
Phone Number
Text Area <textarea id="textarea" name="textarea" cols="20" rows="15"></textarea>
Data
Color
File 
</form>

Descendent Selectors

H+ Sport Mineral Water

To apply the styles using a selector , we can use the code "OL LI" (without the body tag). Here, the space between "OL" and "LI" signifies the descendant relationship. We can then set the color to blue and the font weight to bold. Only the list items that are part of the ordered list will be affected.

Women's Ultra-soft Tank top

For the second question, set the headings one and two to have green uppercase text using a single style declaration. To achieve this, select the "h1" and "h2" elements separately and apply the styles individually

Ingredients

  1. Water
  2. H+ Sport Males Provider
  3. Natural

Varieties

  • Raspberry
  • Strawbarry
  • BlueBarry
  • Lemon4me
  • Peach
  • Orange

Understanding Images in CSS

There are various image formats, like GIF, PNG, JPEG, bitmap, TIFF, and more proprietary formats like PSD. Traditionally, the web has supported three types of image formats.

  1. GIF:Had limited colors but could include transparency and animation.
  2. PNG: Had more colors and transparency but no animation. GIF and PNG were suitable for illustrations such as logos or cartoons.
  3. JPEG: Stands for Joint Photographic Experts Group, was optimized for photographs and supported millions of colors but lacked transparency and animation.

Understanding and Applying size in CSS

Absolute
  • Points
  • Pixels
  • Don't change with screen size
Relative
  • Percentage
  • Rems
  • Change with screen size and Zoom

In web design, there are two types of sizing: absolute and relative. Absolute sizes, such as points or pixels, remain the same regardless of the screen size. On the other hand, relative units like percentages or R-E-M (pronounced "rem") can adjust based on the page size. When I zoom in, the font sizes using relative units scale proportionally with the rest of the page. That is why web designers often prefer using relative units for better flexibility.

H+ SPORT

What's the best exercise?

What's the best exercise for losing weight?is a common quastion according to Dr. Roman ledger of East Bridge Hospital in San Diego. His answer?Whatever exercise you'll do consistently.

Running may turn more calories per minute than walking but if you're more likely to stay the course on a walking program then you'll turn more calories overall in the long run

When venturing into a new exercise program. Dr Roman says that it's more important to consider your own preferences not the calories listings in a diet book

Go outside and Play

Privacy Terms of Service