HOGC Web Developers Training 1

Web Development Level 1 Training HTML References

<!DOCTYPE html> The <!DOCTYPE html> tells the browser which document
type to expect

<html></html> The <html> tag is the container for all other
elements

<head></head> The <head> tag contains information not displayed on the
page

<body></body> The <head> tag contains information displayed on the page

<p>This is a paragraph tag</p> <p>This is a paragraph tag</p>

<p>This is a paragraph tag</p> <br /> <br /> <p>This
is a paragraph tag</p>

<a href="https://google.com.sg">This is an anchor tag that links to google</a>

<button>Click me!</button>

This is an input:<input></input>

<ul></ul> - unordered list <ol></ol> - ordered list <li></li> -
list item <ul> <li>Coffee</li> <li>Tea</li> </ul>

Web Development Level 1 Training CSS References

<div style="background-color: lightblue; padding: 25px">This is a div tag with
padding</div> <div style="background-color: lightblue; margin: 25px">This is a div tag with margin</div> <div style="background-color: lightblue; border-width: 1px; border-color: red; border-style: solid;">This is a div tag with border</div>

<div style="background-color: lightblue; border-width: 1px; border-color: red; border-style: solid;">This is
a div tag with border</div> <div style="background-color: lightblue; border-width: 1px; border-color: red; border-style: solid; border-radius: 8px;">This is a div tag with border radius</div> <div style="background-color: lightblue; border-width: 2px; border-color: red; border-style: dashed; border-radius: 8px;">This is a div tag with dashed border</div>

<p style="font-size: 64px">This is a paragraph tag with the size
of 64px</p> <p style="font-size: 32px">This is a paragraph tag with the size of 32px</p> <p style="font-size: 32px; font-family: Helvetica">This is a paragraph tag with the font family Helvetica</p> <p style="font-size: 32px; font-family: Courier">This is a paragraph tag with the font family Courier</p>

<div style="display: flex; flex-direction: row; background-color: lightblue;"> <p>Hello this is
a text</p> <p>Hello this is a text #2</p> </div> <div style="display: flex; flex-direction: column; background-color: yellow;"> <p>Hello this is a text</p> <p>Hello this is a text #2</p> </div>

<h1 class="bg-lightblue">This is a H1 tag</h1> <h2 class="bg-lightblue">This is a
H2 tag</h2> <h3 class="bg-lightblue">This is a H3 tag</h3> <h4 class="bg-lightblue">This is a H4 tag</h4> <h5 class="bg-lightblue">This is a H5 tag</h5> <h6 class="bg-lightblue">This is a H6 tag</h6> <style> .bg-lightblue { background-color: lightblue; } </style>

HOGC Web Developers Training 1

HOGC Web Developers Training 1

Team HOGC

More Decks by Team HOGC

Other Decks in Programming

Featured

Transcript

Web Development Level 1 Training HTML References

<!DOCTYPE html> The <!DOCTYPE html> tells the browser which document

<html></html> The <html> tag is the container for all other

<head></head> The <head> tag contains information not displayed on the

<body></body> The <head> tag contains information displayed on the page

<h1>This is a H1 tag</h1> <h2>This is a H2 tag</h2>

<p>This is a paragraph tag</p> <p>This is a paragraph tag</p>

<p>This is a paragraph tag</p> <br /> <br /> <p>This

<a href="https://google.com.sg">This is an anchor tag that links to google</a>

<img src="Beach.jpg" width="50%" />

<div>This is a div tag</div> <div>This is a div tag</div>

<button>Click me!</button>

This is an input:<input></input>

<ul></ul> - unordered list <ol></ol> - ordered list <li></li> -

Web Development Level 1 Training CSS References

<h1 style="color: red">This is a H1 tag</h1> <h2 style="color: green">This

<h1 style="color: red; background-color: lightblue;">This is a H1 tag</h1> <h2

<div style="background-color: lightblue; padding: 25px">This is a div tag with

<div style="background-color: lightblue; border-width: 1px; border-color: red; border-style: solid;">This is

<p style="font-size: 64px">This is a paragraph tag with the size

<div style="display: flex; flex-direction: row; background-color: lightblue;"> <p>Hello this is

<h1 class="bg-lightblue">This is a H1 tag</h1> <h2 class="bg-lightblue">This is a