Programming Languages

Size: px

Start display at page:

Download "Programming Languages"

Jayson Smith
5 years ago
Views:

1 What is HTML? - Hyper Text Markup Language - HTML is the foundation of the internet and learning it is the starting point to create a web page also you can t create any web page in any language without HTML. - HTML isn t a programming language. - HTML consists of markup tags and completely depends on its tags and attributes which controls the whole HTML document. HTML VS. Programming Languages: HTML - Static language. - Just markup (rendering) language. - Can t perform any mathematical function. - We have to combine CSS with HTML to add some style in our webpage - Can t protect any image, link, or text - Necessary to make form but can t make it workable Programming Languages - All of them are dynamic languages - Can perform mathematical functions. - We can protect images, links, and text with it - Necessary to make HTML form workable Tools: - Text editor (notepad, notepad++, brackets, sublime, komodo ) - Web browser - Codepen.io Create HTML structure: - Some opening and closing tags builds HTML structure. - HTML documents : All HTML documents must start with a document type declaration: <!DOCTYPE html> which help the browser to know file version is HTML5. The HTML document itself begins with <html> and ends with </html>. The <head> </head> section which have some information like title, style and so on. This information used by browser during showing the page - The visible part of the HTML document is between <body> and </body>. - HTML is not a case sensitive language but w3c recommends lowercase. - Save file as.html or.htm file

Basic Structure: Comments: HTML Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading.

2 Basic Structure: Comments: HTML Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading. Headings Are Important: Search engines use the headings to index the structure and content of your web pages. Users skim your pages by its headings. It is important to use headings to show the document structure. <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on. HTML Paragraphs Paragraph : <p>. </p> preformatted paragraph: <pre>.. </pre> Note: pre not recommended by w3c

3 Text Formatting: <b>.. </b> - Bold text <strong>... </strong> - Important text <i> </i> - Italic text <em> </em> - Emphasized text <u> </u> - Underlined text <mark> </mark> - Marked text <small> </small> - Small text <del> </del> - Deleted text <ins> </ins> - Inserted text <sub> </sub> - Subscript text <sup> </sup> - Superscript text Abbreviation: <abbr title="hyper text markup lang">html</abbr> <acronym title="hyper text markup lang">html</ acronym> Note: acronym Not supported in HTML5. Use <abbr> instead Entities:

4 Lists: Unordered list: <ul type="disc or circle or square or none"> <li>coffee</li> <li>tea</li> <li>milk</li> </ul> Ordered Lists: <ol type="1 or A or a or I or i"> <li>coffee</li> <li>tea</li> <li>milk</li> </ol> - Use start with ol to set the numbering beginning - Use value with li to set li value and the next li continue with it Nested Lists: <ol> <li>web design <ol type="1"> <li>html</li> <li>css</li> <li>js</li> </ol> </li> <li>web development</li> </ol> Description lists: <dl> <dt>coffee</dt> <dd>- black hot drink</dd> <dt>milk</dt> <dd>- white cold drink</dd> </dl>

5 Tables: <table border="1" cellspacing="0" cellpadding="5" width=100% height="300"> <caption>users table</caption> <tr> <th rowspan="3">data</th> <th colspan="2">personal info.</th> <th colspan="2">hr info.</th> </tr> <tr> <th>id</th> <th>name</th> <th>salary</th> <th>position</th> </tr> <tr> <td>1</td> <td>omar</td> <td>500$</td> <td>programmer</td> </tr> </table> HTML Links <a href="url" target="target">link text</a> url: complete link or #id or a file from the same site Target: _blank - Opens the linked document in a new window or tab _self - Opens the linked document in the same window/tab as it was clicked (this is default) _parent - Opens the linked document in the parent frame _top - Opens the linked document in the full body of the window framename - Opens the linked document in a named frame

6 File selection: - on the same folder : write file name directly with its extension - on an outside folder:../file.ext - on a foler inside the same folder: folder/file.ext iframe: <iframe src="demo_iframe.htm" height="200" width="300" frameborder="0" name="iframe_a"></iframe> - by target=_top or target="iframe_a" images: <img src="html5.gif" alt="html5 Icon" width="128" height="128" title="image"> Using image as a link: <a href="default.asp"> </a> <img src="html5.gif" alt="htmlicon" width="128" height="128" title="image">

7 Head Section: <head> <title>html Reference</title> <meta charset="utf-8"> <meta name="description" content="free Web tutorials"> <meta name="keywords" content="html,css,xml,javascript"> <meta name="author" content="john Doe"> <meta http-equiv="refresh" content="30"> <meta name="viewport" content="width=device-width, initialscale=1.0"> </head>

However, IE8 and earlier, does not allow styling of unknown elements.

8 New Semantic Elements in HTML5 Add The HTML5Shiv The new HTML5 semantic elements are supported in all modern browsers. In addition, you can "teach" older browsers how to handle "unknown elements". However, IE8 and earlier, does not allow styling of unknown elements. So, the HTML5Shiv is a JavaScript workaround to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9.

9 Add the HTML5Shiv:  The Difference Between <article> <section> and <div> There is a confusing (lack of) difference in the HTML5 standard, between <article> <section> and <div>. In the HTML5 standard, the <section> element is defined as a block of related elements. The <article> element is defined as a complete, self-contained block of related elements. The <div> element is defined as a block of children elements. How to interpret that? In the example above, we have used <section> as a container for related <articles>. But, we could have used <article> as a container for articles as well. Notes: - In HTML5, you don't have to close all elements (for example the <p> element). - In HTML5, it is optional to close empty elements. - Always add the "alt" attribute to images. This attribute is important when the image for some reason cannot be displayed. Also, always define image width and height. It reduces flickering because the browser can reserve space for the image before loading. - HTML5 allows spaces around equal signs. But space-less is easier to read, and groups entities better together. - Do not add blank lines without a reason. - For readability, add blank lines to separate large or logical code blocks.

10 - For readability, add two spaces of indentation. Do not use the tab key. - Do not use unnecessary blank lines and indentation. It is not necessary to indent every element - The <html> element is the document root. It is the recommended place for specifying the page language: for example: <!DOCTYPE html> <html lang="en-us"> Progress: <progress value="22" max="100"></progress> Output: Meter: <meter value="0.3" high="0.9" low="0.1" optimum="0.5"></meter> And also have min = 0 by default and max=1 by default Details: <details> <summary>copyright </summary> <p> - by Refsnes Data. All Rights Reserved.</p> <p>all content and graphics on this web site are the property of the company Refsnes Data.</p> </details> We can add open to details tag for auto open property

Figure: <figure> <img src="img.jpg" alt="image" width="304" height="228"> <figcaption>fig1. new image.</figcaption> </figure> Time: <p>we open at <time>10:00</time> every morning.

11 Figure: <figure> <img src="img.jpg" alt="image" width="304" height="228"> <figcaption>fig1. new image.</figcaption> </figure> Time: <p>we open at <time>10:00</time> every morning.</p> <p>i have a date on <time datetime=" :00">Valentines day</time>.</p> Bdi: Isolate the usernames from the surrounding text-direction settings: <ul> <li>user <bdi>hrefs</bdi>: 60 points</li> <li>user <bdi>jdoe</bdi>: 80 points</li> <li>user :< bdi />إيان< bdi > 90 points</li> </ul>

12 Without bdi: Wbr: The <wbr> (Word Break Opportunity) tag specifies where in a text it would be ok to add a line-break. <p> To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object. </p>

13 Audio: <audio controls autoplay loop muted prelooad="auto"> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your bro wser does not support the audio element. </audio> Preload have 3 properties:

14 Video: <video width="320" height="240" controls autoplay loop poster="image" preload="auto"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> Preload have 3 properties:

15 Forms: <form method="get or post" action="file.ext" target="_blank or _parent or _self or _top" novalidate or validate autocomplete="off or on" enctype="application/x-www-form-urlencoded <input type="text" Name= " " or multipart/formdata or text/plain "> size= " " maxlength=" " readonly -> can t use with(range check hidden submit file color range) and can use with focus and containing data send with form data disabled -> can t use with(range check hidden submit file color range focus) and containing data not send with form data autofocus="on" required autocomplete="on or off" multiple -> more than one input pattern="[a-z]{6} means A->Z and 6 chars" = "[A-Za-z] means A-Z and a-z" = ".{6,}" means 6 or more characters = "(?=.*\d)(?=.*[a-z])(?=.*[a-z]).{8,}" means Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters ><br> = "https?://.+" means "Include <input type="tel"><br> <input type="password"><br> <input type="hidden"><br> <input type=" "><br>

16 <input type="search"><br> <input type="url"><br> <input type="time"><br> <input type="datetime-local"><br> <input type="date"><br> <input type="month"><br> <input type="week"><br> <input type="file"><br> <input type="radio" name="gender" value="male"> Male <br> <input type="radio" name="gender" value="female"> Female <br> <input type="checkbox" name="a" value="a" checked> a <br> <select name=""> <optgroup label="1"> <option>a</option> <option>b</option> </optgroup></select> <br> <textarea rows="2" cols="20"></textarea><br> <input type="number" min="0" max="10" step="5"><br> <input list="a" name="a"> <datalist id="a"> <option value="1"> <option value="1"> </datalist> <input type="color" name="c"> <input type="range" min="0" max="10" value="1" step="2"> <input type="reset"> <input type="submit" form="formid" formaction="file.html" formnovalidate formmethod="get" formtarget="_blank">

Web Designing HTML5 NOTES

Web Designing HTML5 NOTES HTML Introduction What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages