Scribd Logo
Upload

Welcome to Scribd!

  • HTML Summary

    Uploaded by

    maxiuda2013
    30 views6 pages
    A brief summary of basic HTML5 for beginners sans animation and canvas.

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    A brief summary of basic HTML5 for beginners sans animation and canvas.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    30 views6 pages

    HTML Summary

    Uploaded by

    maxiuda2013
    A brief summary of basic HTML5 for beginners sans animation and canvas.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    HTML Summary Page Set up Declares document to be html: <!

    !DOCTYPE html> Closing tags are included where a tag holds content Declaring contents to be html: <html>content</html> Making a header to store css and basic info about doc: <head></head> Add a title to the browser page: <head><title>Title</title></head> Add content to page:<body>content</body> Text Headings use h1 to h6 with h1 as largest: <h1>Title</h1> Paragraphs create a new line with: <p>content</p> Make text bold with: <strong>text</strong> Make italics with: <em>text</em> Declaring Attributes Follows common format of attribute = something1:value;something2:value Adding Images Images reference rather than contain content so do not have closing tag: <img src =link> SRC = source Adding Links To add a link use: <a href=link></a> Links always surround their object eg: <a href =link><img src =link></a> Href = hypertext reference Can add links to another page element: First add id to tag <tag id = mylink></tag> Second <a href = #mylink></a> To add tabbing to links use: <a href = link tabindex=1> To add more information about a link, use: <a href =link title = Whatever> To add an access key, use :<a href= link accesskey = s> This will allow the link to be opened by using alt+relevant letter Lists Ordered list (numbered list): <ol><li>text</li></ol> Unordered list (bullet points): <ul><li>text</li></ul> Definition list (indents definition): <dl><dt></dt><dd></dd></dl> Dt standards for definition terms, dd stands for definition descriptions Font Styling Change font size: <tag style = font-size:12px> </tag> Change the colour and size: <tag style ="color:green; font-size:16"> </tag> Changing font family: <tag style = font-family:familyname></tag> Align text: <tag style = text-align:centre/left/right>text</tag> Background color Change background color: <tag style = background-color:color Tables Create table as follows <table>

    <thead> <!--Creates a header for the table, basically bolds the header --> <th colspan="3"> Would make a title header span three colums (merge 3 columns) <th> <!--Creates a td in bold representing a header for the table --> </th> </thead> <tbody> <tr> <!-- Creates a row -- > <td>Three</td> <!-- Creates a table data cell (basically a box inside the row --> <td>1935</td> <!-- Creates a separate column with similar affects --> To make header, simply change td tags to th tags. Alternatively can use <thead><tr><td></td></tr><thead> To make footer use <tfooter><tr><td></td></tr></tfooter> To make a body section use: To make footer use <tbody><tr><td></td></tr></tbody> To merge rows use rowspan To merge columns use colspan To apply CSS to specific columns use sth like: <table> <colgroup> <col> <col class="alternative"> <!second column will have different style--> <col> </colgroup

    Adding caption to table Use something like: <table> <caption>Locust mating habits</caption> This will add to top of table, to change to bottom add caption-side: bottom to css

    Table elements styling Works the same as for other tags Can also include the following: padding:5px; border:1px solid black; <makes all borders show> border-left: 1px solid black; <makes the left border show border-right:1px solid blackl <makes the right border show border-top: 1px solid black; <makes the top border show border-bottom: 1px solid black; <makes the top border show Divs Allow a webpage to broken up into segments for styling purposes (use new tags if trying to provide semantic separation) <div style="width:50px; height:50px; background-color:red"></div> Example of linked div: <a href = "http://www.gaconsulting.co.kr""><div style="width:50px; height:50px; background-color:yellow"></div></a> Span Allows styling of smaller page elements such as text <p>This text is black, except for the word <span style ="color:red">red!</span></p>

    Forms Set up form as follows: <form action="processingscript.php" method="post"> </form> Action provides the form with the code to make it work. The method can be post or get. Post is more secure way to transmit the data inputted into the form. Input can be various types use : <input type = inputtype> (there is no closing tag) Input types include: text, password, checkbox, checkbox checked, radio, submit value =what ever data to be submitted To make a multiline input box use: <textarea rows="4" cols="50"> The size of the textarea is best to define via CSS rather than rows and columns To make a drop down box use: <select> <option selected>Rodent</option> <!This is optional and selects an entry in the list--> <option>Option 1</option> <option>Option 2</option> <option value="third option">Option 3</option> </select> Value is optional, if not included, form will send text between options To make a drop down box where values are divided into different groups use: <select name="country"> <optgroup label="Africa"> <option value="gam">Gambia</option> <option value="mad">Madagascar</option> <option value="nam">Namibia</option> </optgroup> <optgroup label="Europe"> <option value="fra">France</option> <option value="rus">Russia</option> <option value="uk">UK</option> </optgroup> <optgroup label="North America"> <option value="can">Canada</option> <option value="mex">Mexico</option> <option value="usa">USA</option> </optgroup> </select> All form tags inside the form need names or form will not work, example: <input type=text name = text1> To make add label to form use something like: <label for="yourName">Your Name</label> <input name="yourName" id="yourName"> This will make clicking on the label itself focus on the input control. To group a section of a form use: <fieldset> <legend>Name</legend> <!This labels the section--> <p>First name <input name="firstName"></p> <p>Last name <input name="lastName"></p> </fieldset> To make fields easy to navigate use: <input name="firstName" accesskey="f" tabindex="1">

    New input types For search boxes, use: <input type="search" name="search"> To style in css use: input[type=search] { background: url(magnifyingglass.png) right no-repeat) } For telephone numbers, use: <input type="tel" name="telephone_number"> For urls, use: <input type="url" name="web_address"> For emails, use: <input type="email" name="email_address"> To style telephone numbers, urls, or emails, use: input[type=email]:valid { background: green } input[type=email]:invalid { background: red } For a ranged input box allowing selection or direct typing of a number use: <input type="number" name="quantity" step="2" min="20" max="30"> For a slider with an input box showing value, use: <input id="slider2" type="range" min="-300" max="300" step="50" value="-300" onchange="printValue('slider2','rangeValue2')"> <input id="rangeValue2" type="text" size="2"> To select a colour, use: <input name="color" type="color" value="#ff8800"> To add a back image to an input box use: <label for="email_address">Email address</label> <input type="email" placeholder="you@somewhere.com" name="email_address" id="email_address"> To suggest options in a text field when user starts typing, use: <input name="country" list="country_name"> <datalist id="country_name"> <option value="Afghanistan"> <option value="Albania"> <!-- etc. --> </datalist>

    Abbreviations To insert an abbreviation use: <abbr title="Full spelling">Abbreviation</abbr> The full spelling will not be seen on the page but in some browsers, it will be shown as a tool tip when hovering over the word. It is also allows for search engines to more easily find the abbreviation and related full expression. Definitions To insert an abbreviation use: <defn title="definition ">text</defn> The full spelling will not be seen on the page but in some browsers, it will be shown as a tool tip when hovering over the word. It is also allows for search engines to more easily find the definition and its connection to other material. Quotes and Blockquotes For a short quote under a line use: <q cite = http://www... >text to be quoted </q> This will cause quotation marks to be added to the text For multiline quote use: <blockquote cite = http:..><q>text</q></blockquote> This will cause the text to be indented and quotation marks added

    Citations For citations, use: <cite>name of reference</cite> This will automatically italicize the text

    Code For code, use: <code>code</code> For keyboard input, use <kbd>input</kpd> For variables, use: <var>variable</var> For sample output use: <samp>output</samp> These will cause the text to be displayed slightly smaller than the main text Preformatted text To preformat text use: <pre>text</pre> Use with text you dont want to be word-wrapped and you want to be displayed including the original whitespace and linebreaks Metatags Worth Including <meta charset="utf-8"> <meta name="description" content="Insert short description"> Bi-directional text To make text backwards use: <bdo dir="rtl"> </bdo>

    Insertions and Deletion To show a deletion and insertion, use: <del datetime="2013-01-26">deleted text</del> <ins cite="http://...">text</ins> This will strikethrough the deleted word and underline the correction. Sectioning HTML5 makes use of new sectioning tags instead of divs which provide better semantic meaning allowing a page to be more effectively understood by webcrawlers/scrappers. For main article, use: <article id = something> </article> For content related to article, use: <aside>content</aside> For sections of an article in logical groups use: <section></section> To add a group introductory information or navigational aids at the beginning of a section or article, use: <header></header> Where only title is including just use relevant h tag rather than header tag To provide information about the article, including author, copyright, links at the end of a section or article use: <footer></footer> To markup navigation particularly in header use<nav></nav>. Example: <nav id="main_nav"> <ul> <li><a href="/tutorials/">Tutorials</a></li> <li><a href="/reference/">Reference</a></li> <li><a href="/articles/">Articles</a></li> <li><a href="/about/">About us</a></li> </ul> </nav>
    Time th To mark up time, use <p><time datetime =2012-01-05>the 5 of January 2012</time></p> This will allow content to be easily dated by webcrawlers etc Highlighting/Marking To highlight text, use: <mark>text</mark> This is mainly used for commenter emphasis rather than the original speaker/writer

    Tags with changed meanings hr, no longer horizontal rule, is a thematic break, between paragraphs, for example, like those found in many a chapter of many a book. small, used for small print. Arguably a fair point, small print has taken on a meaning beyond print that is small. s, no longer strikethrough, is for text that is no longer correct (eg, this is <s>presentational, not</s> meaningful). Hmm. OK. Maybe. del still seems fine to most normals, though. u, no longer underline, is for text that is unarticulated. Its also useless but bonus point for the abbreviation remaining intact. i, no longer italic, is for text in an alternate voice or represent ing a different quality of text. So, like, differently emphasized, then (see note below). b, no longer bold, stands for text to which attention is being drawn without conveying importance or suggesting an alternative voice (and even thats paraphrasing ). b also stands for bollocks. sub and sup are still subscript and superscript and yet, at the same time, theyre somehow not presentational anymore. Conditional Statements for IE Under current CSS style sheet, insert the following: <!--[if IE]><link href="IEspecific.css" rel="stylesheet"><![endif]-->

    Embedding Video To embed video, use:<video src="kitties.mp4" controls></video> To autoplay, replace controls with autoplay A more complex version with a preplay image could be: <video src="kitties.mp4" poster="kittens.jpg" width="300" height="200" loop muted autoplay controls></video> To provide fallback if video tag not recognized, use: <video src="kitties.mp4" controls> <img src="hahahaha.jpg" alt="Hilarious cat and caption saying 'soz'."> </video> To provide alternate content, use: <video controls> <source src="kitties.mp4" type="video/mp4; codecs='avc1, mp4a'"> <source src="kitties.webm" type="video/webm; codecs='vp8.0, vorbis'"> <p>Browser no likey HTML 5.</p> </video> Embedding audio <audio src="meow_mix.mp3" controls> Your stupid browser doesn't support HTML 5 audio. </audio> Embedding canvas <canvas id="wittykitty" width="800" height="450"> <!-- Fall-back content here, just like with video and audio --> </canvas>

    You might also like