{"id":45,"date":"2021-08-13T16:10:31","date_gmt":"2021-08-13T15:10:31","guid":{"rendered":"http:\/\/www.dpnwordpress.org\/principles-of-coding\/?p=45"},"modified":"2021-10-08T18:14:46","modified_gmt":"2021-10-08T17:14:46","slug":"getting-to-grips-with-html","status":"publish","type":"post","link":"https:\/\/www.dpnwordpress.org\/principles-of-coding\/index.php\/2021\/08\/13\/getting-to-grips-with-html\/","title":{"rendered":"Getting to grips with HTML"},"content":{"rendered":"\n

We are using CodeCademy<\/a> to learn HTML (Hypertext Markup Language) – the basic coding required for websites. <\/p>\n\n\n\n

\"Codecademy<\/a><\/figure>
\n

Introduction<\/strong>
Lesson: Introduction to HTML
Lesson: HTML Document Standards
Project: Fashion Blog (pro)
Cheat sheet download \u2013 <\/strong>Elements and Structure PDF<\/a>
<\/strong>
Tables<\/strong>
Lesson: HTML
Quiz: HTML Tables (pro)
Project: Wine Festival Schedule (pro)
Cheat sheet download\u2013 Tables PDF<\/a><\/p>\n\n\n\n

Forms<\/strong>
Lesson: HTML Forms
Lesson Form Validation
Quiz: HTML Forms (pro)
Project: Forma story (pro)
Cheat sheet attached \u2013 Forms PDF<\/a><\/p>\n\n\n\n

Semantic HTML<\/strong>
Lesson: Semantic HTML
Quiz: Semantic HTML (pro)
Project: New York City Blog (pro)
Cheat sheet attached \u2013 Semantic HTML PDF<\/a><\/p>\n<\/div><\/div>\n\n\n\n

HTML is the language used to create webpages. HTML stands for Hypertext Markup Language<\/strong>. HTML documents written with this text (or coding) tell browsers how to interpret and display the data.<\/p>\n\n\n\n

HTML documents can be identified by the file extension .htm or .html<\/strong>. HTML standards are set and maintained by an international group of industry leaders such as Microsoft and Apple, called The World Wide Web Consortium (W3C)<\/a>. The rules that govern how HTML is written are called syntax. As new Web technologies emerge, HTML evolves through the W3C with newer versions such as 5.0<\/strong> that introduced new standards.<\/p>\n\n\n\n

HTML is the skeleton of all web pages. It\u2019s often the first language learned by marketers and designers and is core to front-end development work.<\/p>\n\n\n\n

So what exactly is HTML?<\/h2>\n\n\n\n

HTML provides structure to the content appearing on a website, such as images, text, or videos.
Right-click on any page on the internet, choose \u201cInspect\u201d – or Ctrl+Shift+I – and you\u2019ll see HTML in a panel of your screen.<\/p>\n\n\n\n


HTML stands for HyperText Markup Language:<\/p>\n\n\n\n

  • A markup language is a computer language that defines the structure and presentation of raw text.<\/li>
  • In HTML, the computer can interpret raw text that is wrapped in HTML elements.<\/li>
  • Hypertext is text displayed on a computer or device that provides access to other text through links, also known as hyperlinks.<\/li><\/ul>\n\n\n\n

    Learning HTML is the first step in creating websites. but even a bit of knowledge can help you inject code snippets into newsletters, blog or website templates. As you continue learning, you can layer HTML with CSS and JavaScript to create visually compelling and dynamic websites<\/strong>.<\/p>\n\n\n\n

    HTML Anatomy<\/h3>\n\n\n\n
    \"Image<\/figure>
    \n

    HTML is composed of elements. These elements structure the webpage and define its content.<\/p>\n\n\n\n

    The diagram to the left displays an HTML paragraph element. <\/p>\n\n\n\n

    As we can see, the paragraph element is made up of one opening tag (<<\/strong>), the content (\u201cHello World!\u201d text), and a closing tag (><\/strong>).<\/p>\n\n\n\n

    A tag and the content between it is called an HTML element.<\/p>\n\n\n\n

    There are many tags that we can use to organise and display text and other types of content.<\/p>\n<\/div><\/div>\n\n\n\n


    Let\u2019s quickly review each part of the element pictured above:<\/p>\n\n\n\n

    • HTML element (or simply, element) \u2014 a unit of content in an HTML document formed by HTML tags and the text or media it contains.<\/li>
    • HTML Tag \u2014 the element name, surrounded by an opening (<) and closing (>) angle bracket.<\/li>
    • Opening Tag \u2014 the first HTML tag used to start an HTML element. The tag type is surrounded by opening and closing angle brackets.<\/li>
    • Content \u2014 the information (text or other elements) contained between the opening and closing tags of an HTML element \u2013 visible to your audience.<\/li>
    • Closing tag \u2014 the second HTML tag used to end an HTML element. Closing tags have a forward slash (\/) inside of them, directly after the left angle bracket.<\/li><\/ul>\n\n\n