Basic HTML Tutorial

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> </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><a rel="nofollow" id="cancel-comment-reply-link" href="/keyblogging/project/basic-html-tutorial/#respond" style="display:none;">Cancel reply</a></small></h3> <form action="https://keyblogging.com/wp-comments-post.php" 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><!-- #respond --> </div> </div> <aside class="x-sidebar right" role="complementary"><div id="recent-posts-2" class="widget widget_recent_entries"> <h4 class="h-widget">Recent Posts</h4> <ul><li> <a href="https://keyblogging.com/project/wordpress-training-creating-posts/">WordPress Training – Creating Posts</a> </li> <li> <a href="https://keyblogging.com/project/search-engine-optimization-optimizing-webpages/">Search Engine Optimization – Optimizing Webpages</a> </li> <li> <a href="https://keyblogging.com/project/search-engine-optimization-linking/">Search Engine Optimization – Linking</a> </li> <li> <a href="https://keyblogging.com/project/search-engine-optimization-keyword-analysis/">Search Engine Optimization – Keyword Analysis</a> </li> <li> <a href="https://keyblogging.com/project/search-engine-optimization-google/">Search Engine Optimization – Google+</a> </li> </ul></div><div id="archives-2" class="widget widget_archive"><h4 class="h-widget">Archives</h4> <ul><li><a href="https://keyblogging.com/2019/12/">December 2019</a></li> </ul></div><div id="categories-2" class="widget widget_categories"><h4 class="h-widget">Categories</h4> <ul><li class="cat-item cat-item-3"><a href="https://keyblogging.com/category/blogging/">Blogging</a> </li> <li class="cat-item cat-item-4"><a href="https://keyblogging.com/category/project/">Project</a> </li> </ul></div> </aside></div> <footer class="x-colophon top"><div class="x-container max width"> <div class="x-column x-md x-1-1 last"><div id="custom_html-2" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><h5>Questions? Contact Us:</h5><br><a href="mailto:apps@rplogic.com?Subject=KeyBlogging%20Help" target="_top" rel="noopener noreferrer">Send Mail</a><br><a href="terms-of-service/">Terms of Service</a></div></div></div> </div> </footer><footer class="x-colophon bottom" role="contentinfo"><div class="x-container max width"> <div class="x-social-global"></div> <div class="x-colophon-content"> ©2014. <a href="http://rplogic.com/" class="">RPLogic, LLC</a>. All Rights Reserved. </div> </div> </footer></div> <!-- END .x-site --> </div> <!-- END .x-root --> <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>