Scribd Logo
Upload

Welcome to Scribd!

  • Learn HTML in 15 Minutes

    Uploaded by

    HarALevelComputing J
    13 views7 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    13 views7 pages

    Learn HTML in 15 Minutes

    Uploaded by

    HarALevelComputing J

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 7

    Learn HTML in 15 Minutes

    <!–– and the comment closes with ––>

    <!–– Multi Line

    ––>

    <!--

    https://www.youtube.com/watch?v=Ggh_y-33Eso&list=PL82EBDA7BEB6BD571

    Every single tag in HTML in one video

    Web browsers reads HTML, which is just a text file filled with tags

    HTML is not a programming language

    tags are just words or individual characters and angled brackets

    which tells the browser what text needs emphasis, what is a praragraph

    and more. 89 total tags, but mostly use only 20

    -->

    <!-- define what version i am using, telling browser that i am using transitional form -->

    <! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


    "http://www.w3.org/TR/html4/loose.dtd">

    <html> <!-- head is to do with header -->

    <head>

    <!-- define what language and character set i am using-->

    <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />

    <!-- define style, not good convention -->

    <style type="text/css">

    h1 {color:red}

    </style>

    <!--

    can link to a text/css file that has the style settings, good convention
    rel defines what kind of relationship this file has with the linked file,

    stylesheet as used for styles

    type states type of file

    href specifies the URL of the page the link goes to

    -->

    <link rel="styleshet" type="text/css" herf="styles.css"/>

    <!-- description of what is on the website, can define as many meta tags as you want
    -->

    <meta name="description" content="Welcome to Bobs Hardware" />

    <meta name="keywords" content="Hammers, Nails and Screwdrivers" />

    <meta name="author" content="Bob Smith" />

    <!-- Title of document, appears in browser tab -->

    <title>Welcome to bobs Hardware</title>

    </head>

    <!-- define what goes in the body of the website -->

    <body>

    <!-- Titles: H1 is largest, H6 is smallest, H1 is red because of the style tag in <head>
    -->

    <h1>H1</h1>

    <h2>H2</h2>

    <h3>H3</h3>

    <h4>H4</h4>

    <h5>H5</h5>

    <h6>H6</h6>

    <!-- abbreviation tag, title shows up when mouse over text -->

    <abbr title="As Soon as possible">ASAP</abbr>


    <!-- acronym tag, title shows up when mouse over text -->

    <acronym title="As Soon as possible">ASAP</acronym>

    ` <br/> <!-- break tag -->

    <b>Bold</b> <!-- bold tag -->

    <br/>

    <big>Big</big> <!-- big tag -->

    <blockquote>Indent this text and style</blockquote><br /> <!-- blockquote indents


    the tag -->

    <center>Center me please</center> <!-- center tag places at


    center-->

    <em>I like italic</em> <!-- emphasis tag -->

    <i>me too</i> <!-- very similar to


    emphasis tag-->

    <p>I'm a big paragraph</p> <!-- Paragraphs automatically add new lines


    after text -->

    <q>I'm a quote</q> <!-- quote tag to define quotes without putting "" --
    >

    <s>I've been struck</s> <!-- strikethrough tag for line through


    text -->

    <small>I feel small</small> <!-- for small text -->

    <strong>I'm strong</strong> <!-- for storng text -->

    <sub>subscript</sub> <!-- for subscript text, lifted upwards -->

    <sup>superscript</sup> <!-- for superscript text, lowered down -->

    <!--

    image tag

    src is source of image, alt is descriptive text for blind or failure to load image

    height and width is to set dimensions, if left empty it will default as the original image
    size
    -->

    <img src="http://newthinktank.com/wp-content/uploads/2010/03/marketing-
    examples45_sm_sm.jpg"

    alt="Marril Lynch Ad"

    height="415" width="300" />

    <!-- list types -->

    <dl> <!-- description list tag -->

    <dt>Bicycle</dt> <!-- term/name tag for a term/name in a description list-->

    <dd>Has 2 wheels</dd> <!-- definition tag for definition of term/name-->

    </dl>

    <ol> <!-- ordered list tag, each will have numbers -->

    <li>Car</li> <!-- list item tag -->

    <li>Truck</li>

    </ol>

    <ul> <!-- unordered list tag, each has bullet point or likewise --
    >

    <li>Car</li>

    <li>Truck</li>

    </ul>

    <!-- links or anchor tags -->

    <!-- text that links to another website, set target to _blank to open in another
    tab/window,

    _self, for open-->


    <a href="http://newthinktank.com" target="_blank">Awesome Website</a>

    <!-- create a table using table tab, with description of table -->

    <table summary="Here is a table">

    <!-- create caption -->

    <caption>

    Some things i did

    </caption>

    <!-- create table row -->

    <tr>

    <!-- create table column -->

    <th>Sat</th>

    <th>Sun</th>

    </tr>

    <tr>

    <th>Rode bike</th>

    <th>Ran</th>

    </tr>

    </table>

    <!-- note: table by itself has no styling -->

    <!-- create form, accepts input from user and send it to PHP script for processing
    post method information passed is passed within the header information of the file, not
    displayed in the URL

    get method passed in URL, best practice to use post as more secure

    -->

    <form action="mail2.php" method="post">

    <!-- define what information is going to be placed inside -->

    <b>Send message to this email</b><br/>

    <!-- input tag, define type of input as text, define variable name to hold input
    as email,

    define size as 40char long -->

    <input type="text" name="email" size=40><br/>

    <!-- use text areas for multi line input, define size as cols and rows -->

    <textarea cols=40 rows=10 name="message">Default text</textarea><br/>

    <!-- input text and not show on screen -->

    <input type="password" name="password" size=40><br/>

    <!-- radio buttons, must have the same name so only 1 at a time -->

    <input type="radio" name="radioinput" value="Love Radio Buttons" />Love


    Radio Buttons

    <input type="radio" name="radioinput" value="Hate Radio Buttons" />Hate


    Radio Buttons

    <br/>

    <!-- checkboxes -->

    <input type="checkbox" name="checkboxinput1" value="blue"/>blue

    <input type="checkbox" name="checkboxinput2" value="red"/>red


    <!-- select drop down tag -->

    <select name="selectinput">

    <!-- options for drop down menu -->

    <option value="loveselect">I love</option>

    <option value="hateselect">I hate</option>

    </select>

    <!-- hidden field, value that is passed along but not displayed on the website --
    >

    <input type="hidden" name="Submitted" value="True" />

    <!-- input button to send information, value is text on button -->

    <input type="submit" value="Send" />

    </form>

    </body>

    </html>

    You might also like