Scribd
Upload
32 views

Click Me!

The document discusses various HTML tags such as <button>, <form>, <video>, <article>, <style>, <ul>, <ol>, and their usage. It also covers CSS concepts like selectors, properties and applying styles through inline, internal and external stylesheets. CSS is used to style elements in an example CatPhotoApp by changing text colors and fonts.

Uploaded by

rhed aspa
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
32 views

Click Me!

The document discusses various HTML tags such as <button>, <form>, <video>, <article>, <style>, <ul>, <ol>, and their usage. It also covers CSS concepts like selectors, properties and applying styles through inline, internal and external stylesheets. CSS is used to style elements in an example CatPhotoApp by changing text colors and fonts.

Uploaded by

rhed aspa
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Button tag

<button type="button" onclick="alert('Hello world!')">Click Me!</button>


Form
<!DOCTYPE html>

<html>

<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">

First name:<br>

<input type="text" name="firstname" value="Mickey">

<br>

Last name:<br>

<input type="text" name="lastname" value="Mouse">

<br><br>

<input type="submit" value="Submit">

</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body>

</html>

Comments in HTML starts with <!--, and ends with a -->


HTML5 introduces more descriptive HTML tags. These
include header, footer, nav, video, article, sectionand others.
Video Tag
<!DOCTYPE html>

<html>

<body>
<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>

<p><strong>Note:</strong> The video tag is not supported in Internet Explorer 8 and earlier versions.</p>

</body>

</html>

Article Tag

<!DOCTYPE html>

<html>

<body>

<article>

<h1>Google Chrome</h1>

<p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>

</article>

<p><strong>Note:</strong> The article tag is not supported in Internet Explorer 8 and earlier versions.</p>

</body>

</html>

ID and Style Tag

<!DOCTYPE html>

<html>

<head>

<style>

#Header {

background-color: lightblue;
color: black;

padding: 40px;

text-align: center;

</style>

</head>

<body>

<h2>The id Attribute</h2>

<p>Use CSS to style an element with the id "myHeader":</p>

<h1 id="Header">My Header</h1>

</body>

</html>

A nested to p

<p>"View more cat photos<a href="http://freecatphotoapp.com"target="_blank">cat


photos</a></p>
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its
back.">
Bullet Tag

<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
OL tag

<!DOCTYPE html>

<html>

<body>

<ol>

<li>Coffee</li>
<li>Tea</li>

<li>Milk</li>

</ol>

<ol start="50">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

</body>

</html>

Action tag

<!DOCTYPE html>

<html>

<body>

<form action="/action_page.php">

First name: <input type="text" name="FirstName" value="Mickey"><br>

Last name: <input type="text" name="LastName" value="Mouse"><br>

<input type="submit" value="Submit">

</form>

<p>Click the "Submit" button and the form-data will be sent to a page on the server called
"/action_page.php".</p>

</body>

</html>

<form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL">
</form>
Button tag
<button type="submit">Submit</button>
Label tag

<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor">


Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor">
Outdoor</label>
Checkbox

<br /br>
<label for="loving"><input id="loving" type="checkbox"
name="personality">Loving</label>
<br /br>
<label for="caring"><input id="caring" type="checkbox"
name="personality">caring</label>
<br /br>
<label for="cute"><input id="cute" type="checkbox"
name="personality">Cute</label>

Introduction to Basic CSS


Cascading Style Sheets (CSS) tell the browser how to display the text and other content
that you write in HTML.

Note that CSS is case-sensitive so be careful with your capitalization. CSS has been
adopted by all major browsers and allows you to control:

 color
 fonts
 positioning
 spacing
 sizing
 decorations
 transitions

There are three main ways to apply CSS styling. You can apply inline styles directly to
HTML elements with the styleattribute. Alternatively, you can place CSS rules
within styletags in an HTML document. Finally, you can write CSS rules in an external
style sheet, then reference that file in the HTML document. Even though the first two
options have their use cases, most developers prefer external style sheets because they
keep the styles separate from the HTML elements. This improves the readability and
reusability of your code. The idea behind CSS is that you can use a selector to target an
HTML element in the DOM (Document Object Model) and then apply a variety of
attributes to that element to change the way it is displayed on the page.
In this section, you'll see how adding CSS styles to the elements of your CatPhotoApp
can change it from simple text to something more.

CSS
<h2 style="color: blue;">CatPhotoApp</h2>

You might also like