HTML Basics

HTML (HyperText Markup Language) – The language or code that makes computers able to communicate with each other. HTML determines what is displayed on a page.

 

HTML Tags – The basis of HTML (e.g. )</p> <ul> <li>HTML Tags are defined by a left angle bracket (<), the name of the tag or element (title), and right angle bracket (>).</li> <li>Tags contain the contents of an element with a beginning (<title>)and an end tag (/title). The end tag looks the same as the beginning tag, but with an extra slash between left angle bracket and the name of tag.</li> </ul> <p> </p> <p><strong>Whitespace</strong> – The term describing characters that don’t display on a page (spaces, tabs, newlines). Whitespace will be treated as a single space in the display of a site and what is before and after the whitespace will wrap together.</p> <p> </p> <p><strong>Paragraphs</strong> (<p> </p>) are used to display text.  You can put text outside of a paragraph tag, but it is easier to format text within the paragraph element.</p> <p> </p> <p>It is best to style and format paragraphs using <strong>CSS (Cascading Style Sheets).  </strong>We will not go into detail on CSS in this course, but you can use CSS to do things such as align a paragraph to the center. <p style=”text-align: center”></p> <h2>Phrase & Font Elements</h2> <table width="100%"> <tbody> <tr> <th width="50%">Phrase Elements – semantic tags used to format text of particular significance</th> <th width="50%">Font Markup Elements – tags used to change the visual style of a font</th> </tr> <tr> <td width="50%">• <strong> – defines important texts and displays bolded<br> • <em> – renders as emphasized text and displays italicized<br> • <dfn> – defines a definition term<br> • <code> – defines a piece of computer code<br> • <samp> – defines sample output from a computer program<br> • <kbd> – defines keyboard input <var> – defines a variable</td> <td width="50%">• <b> – boldface<br> • <i> – italic<br> • <tt> – teletype<br> • <u> – underline<br> • <s> – strike through<br> • <big> – big print<br> • <small> – small print<br> • <sub> – subscript<br> • <sup> – superscript</td> </tr> </tbody> </table> <p>Some phrase and font markup elements look the same (e.g. <strong> and <b>). Use the phrase elements when the text is more important than other text on the page. Use font markup elements when the desired effect is only visual/stylistic.</p> <h2>Line Breaks & Spaces</h2> <p><img class="alignnone size-full wp-image-94" src="https://keyblogging.com/wp-content/uploads/sites/121/2019/12/html-line-breaks.png" alt="" width="495" height="278" srcset="https://keyblogging.com/wp-content/uploads/sites/121/2019/12/html-line-breaks.png 495w,https://keyblogging.com/wp-content/uploads/sites/121/2019/12/html-line-breaks-300x168.png 300w,https://keyblogging.com/wp-content/uploads/sites/121/2019/12/html-line-breaks-100x56.png 100w" sizes="(max-width: 495px) 100vw, 495px"></p> <p><strong><br/> </strong>– line break</p> <ul> <li>Since br is an empty tag and has no contents, you can use the empty tag short cut and put the slash inside the brackets.</li> <li>This is not a paragraph break. To make it look like paragraph, or bigger break, repeat the <br/> tag.</li> </ul> <p> </p> <p><strong> </strong> – non-breaking space inserts extra spaces between words</p> <h2>Images</h2> <ul> <li>Image Tag – <img src=”example.jpg” alt=”example of image” title= “example image” height=”150″ width=”150″></li> <li>Attributes of the image tag <ul> <li>src – specifies the source or URL of the image</li> <li>alt- alternative text of an image (describes the contents of the image and will display if the browse can’t load the image or loads slowly)</li> <li>title – text that will display in a tooltip</li> <li>height – height of image in pixels</li> <li>width – width of image in pixels</li> </ul> </li> <li><caption> tag defines the image caption</li> </ul> <h2>Hyperlinks</h2> <p><img class="alignnone size-full wp-image-95" src="https://keyblogging.com/wp-content/uploads/sites/121/2019/12/hyperlinks.png" alt="" width="698" height="321" srcset="https://keyblogging.com/wp-content/uploads/sites/121/2019/12/hyperlinks.png 698w,https://keyblogging.com/wp-content/uploads/sites/121/2019/12/hyperlinks-300x138.png 300w,https://keyblogging.com/wp-content/uploads/sites/121/2019/12/hyperlinks-100x46.png 100w" sizes="(max-width: 698px) 100vw, 698px"></p> <p><strong>Hyperlink Tag</strong> – <a href=”http://URLGOESHERE.com/”>link text that is displayed</a></p> <p>To make your link open in a new window add the target attribute <a href=”http://URLGOESHERE.com/” target=”_blank”>link text that is displayed</a></p> <h2>Headings</h2> <p>Headings help your page to be properly indexed and easily readable by search engines. Heading elements are available in six levels</p> <h1><h1>HEADING TEXT</h1></h1> <h2><h2>HEADING TEXT</h2></h2> <h3><h3>HEADING TEXT</h3></h3> <h4><h4>HEADING TEXT</h4></h4> <h5><h5>HEADING TEXT</h5></h5> <h6><h6>HEADING TEXT</h6></h6> <p><em>Headings can be styled with CSS to customize the look of each level, but the standard format is from big to small.</em></p> <h2>Lists</h2> <p><img class="alignnone size-full wp-image-96" src="https://keyblogging.com/wp-content/uploads/sites/121/2019/12/html-lists.png" alt="" width="527" height="245" srcset="https://keyblogging.com/wp-content/uploads/sites/121/2019/12/html-lists.png 527w,https://keyblogging.com/wp-content/uploads/sites/121/2019/12/html-lists-300x139.png 300w,https://keyblogging.com/wp-content/uploads/sites/121/2019/12/html-lists-100x46.png 100w" sizes="(max-width: 527px) 100vw, 527px"></p> <p>Ordered List</p> <ul> <li><ol> then <li></li> </ul> <p>Unordered List</p> <ul> <li><ul> then <li></li> </ul> <p><em>To add another list/indent within a list, just insert another list tag.</em></p> </div> <h3>Related Posts</h3><div class="list-pages related-pages column-4"><div class="page-item"><div class="page-item-text"><h4><a href="https://keyblogging.com/project/wordpress-training-creating-posts/">WordPress Training – Creating Posts</a></h4><a href="https://keyblogging.com/project/wordpress-training-creating-posts/" class="x-btn x-btn-small">Read More</a></div></div><div class="page-item"><div class="page-item-text"><h4><a href="https://keyblogging.com/project/search-engine-optimization-linking/">Search Engine Optimization – Linking</a></h4><a href="https://keyblogging.com/project/search-engine-optimization-linking/" class="x-btn x-btn-small">Read More</a></div></div><div class="page-item"><div class="page-item-text"><h4><a href="https://keyblogging.com/project/search-engine-optimization-keyword-analysis/">Search Engine Optimization – Keyword Analysis</a></h4><a href="https://keyblogging.com/project/search-engine-optimization-keyword-analysis/" class="x-btn x-btn-small">Read More</a></div></div><div class="page-item"><div class="page-item-text"><h4><a href="https://keyblogging.com/project/search-engine-optimization-choosing-optimizing-keywords/">Search Engine Optimization – Choosing & Optimizing Keywords</a></h4><a href="https://keyblogging.com/project/search-engine-optimization-choosing-optimizing-keywords/" class="x-btn x-btn-small">Read More</a></div></div></div> </div> </article> <div id="comments" class="x-comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small></small></h3><form action="https://keyblogging.com/" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> Required fields are marked <span class="required">*</span></p><p class="comment-form-comment"><label for="comment">Comment</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" placeholder="Your Name *" size="30" aria-required="true" required="required"></p> <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" placeholder="Your Email *" size="30" aria-required="true" required="required"></p> <p class="comment-form-url"><label for="url">Website</label><input id="url" name="url" type="text" value="" placeholder="Your Website" size="30"></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p> <p class="form-submit"><input name="submit" type="submit" id="entry-comment-submit" class="submit" value="Submit"> <input type="hidden" name="comment_post_ID" value="92" id="comment_post_ID"> <input type="hidden" name="comment_parent" id="comment_parent" value="0"> </p></form> </div> </div> </div> </div> <footer class="x-colophon top"> <div class="x-container max width"> <div class="x-column x-md x-1-3"><div id="nav_menu-2" class="widget widget_nav_menu"><h4 class="h-widget">About Us</h4><div class="menu-footer-container"><ul id="menu-footer" class="menu"><li id="menu-item-226" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-226"><a href="https://keyblogging.com/privacy-policy/">Privacy Policy</a></li> <li id="menu-item-171" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-171"><a href="https://keyblogging.com/terms-of-service/">Terms of Service</a></li> </ul></div></div></div><div class="x-column x-md x-1-3"><div id="nav_menu-3" class="widget widget_nav_menu"><h4 class="h-widget">Our Services</h4><div class="menu-services-container"><ul id="menu-services" class="menu"><li id="menu-item-188" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-188"><a href="https://keyblogging.com/for-publishers/">For Publishers</a></li> <li id="menu-item-189" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-189"><a href="https://keyblogging.com/for-writers/">For Writers</a></li> <li id="menu-item-190" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-190"><a href="https://keyblogging.com/training/">Blogging and SEO Guides</a></li> </ul></div></div></div><div class="x-column x-md x-1-3 last"><div id="nav_menu-4" class="widget widget_nav_menu"><h4 class="h-widget">Top Articles</h4><div class="menu-top-articles-container"><ul id="menu-top-articles" class="menu"><li id="menu-item-233" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-233"><a href="https://keyblogging.com/project/search-engine-optimization-google/">Search Engine Optimization – Google+</a></li> <li id="menu-item-234" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-234"><a href="https://keyblogging.com/project/photo-editing-gimp-tutorial/">Photo Editing & GIMP Tutorial</a></li> </ul></div></div></div> </div> </footer> <footer class="x-colophon bottom" role="contentinfo"> <div class="x-container max width"> <div class="x-social-global"></div> <ul id="menu-main-2" class="x-nav"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-30"><a href="https://keyblogging.com/">Home</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-37"><a href="https://keyblogging.com/for-publishers/">For Publishers</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-38"><a href="https://keyblogging.com/for-writers/">For Writers</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-39"><a href="https://keyblogging.com/training/">Training</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-40"><a href="https://keyblogging.com/blogging/">Blog</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-41"><a href="https://keyblogging.com/login/">Login / Signup</a></li> </ul> <div class="x-colophon-content"> ©2020. All Rights Reserved. </div> </div> </footer> </div> </div> <script type="text/javascript" src="https://keyblogging.com/wp-content/themes/pro/cornerstone/assets/dist/js/site/cs.fa34ec9.js"></script> <script type="text/javascript" src="https://keyblogging.com/wp-content/themes/pro/framework/dist/js/site/x.js"></script> </body> </html>