
Course Introduction
In this lecture we talk about our main program used throughout this course, Adobe Brackets (for Windows, Mac and Linux). We also talk about an optional Windows only program called Notepad++.
In this lecture we talk about tags and what they are made of (ex, <p>). We also build a basic website structure composed of three main elements, the HTML element, Head element and Body element.
In this lecture we talk about Attributes, which are directly related to elements. We also build our first webpage containing only one paragraph.
In this lecture we talk about the Headings <h1-h6> element, the Paragraphs <p> element, and the Bold <b> and Italic <i> elements.
In this lecture we talk about Superscript <sup>, Subscript <sub>, Line Break <br /> and Horizontal Rule <hr /> elements.
In this lecture we talk about the Strong <strong>, Emphasis <em> and Quotations <blockquote> & <q> elements.
In this lecture we will talk about the Abbreviations and Acronyms <abbr>, Citations <cite> and Definitions <dfn> elements.
In this lecture we will talk about the Author Details <address> and Content Changes <ins>, <del> and <s> elements. Files for lectures 5-9 are also available for download through Downloadable materials and External Resources on Dropbox.
In this lecture we talk about creating links and their code using the <a> tag and the "href" attribute. Ex: <a href="http://www.google.com">Google</>.
In this lecture we talk about websites and how they are structured and placed on the internet. Websites are placed on servers, which are then opened by your browser on the computer once connected to these servers IP address. We also talk about creating relative links between Webpages on the same Website, in different and same folders or directories.
In this lecture we talk about creating email links, opening our links in new tabs and linking to specific parts on the same webpage. Files for lectures 10-12 are also available for download through Downloadable materials and External Resources on Dropbox.
In this lecture we will be talking about Ordered Lists <ol>, also known as numbered lists and how to create them by adding List Items <li>.
In this lecture we will be talking about Unordered Lists (Bullet Points) <ul> and Definition Lists <dl>. We will be using the List Item <li> to add information to the unordered lists and the Definition Terms <dt> and Definition <dd> tags as well to add information to our Definition Lists.
In this lecture we talk about Nested Lists, which simply put, are lists inside other list's List Items <li>. For example we could create an ordered list and add an unordered list inside one of its List Items, in order to make it nested. Files for lectures 13-15 are also available for download through Downloadable materials and External Resources on Dropbox.
In this lecture we talk about finding the right images for our website, example demonstrated by pulling bird pictures from http://www.morguefile.com/. We also talk about adding images using the <img> tag and the src="" and alt="" attributes that link to the picture and describe it, respectively.
In this lecture we talk about the height="" and width="" attributes and Image Placement before, inside and after a paragraph on a webpage.
In this lecture we talk about aligning our images Horizontally and Vertically using the align="" attribute inside the <img> element. Files for lectures 16-18 are also available for download through Downloadable materials and External Resources on Dropbox.
In this lecture we talk about creating tables using the <table> element, adding rows using the <tr> element, adding table data using the <td> element and finally adding our table headings using the <th> element.
In this lecture we will be talking about the colspan="" and rowspan="" attributes. These attributes allow us to stretch a cell across two or more data cells, a very good use for these is if two data cells next to each other contain the same data, then we can combine them into one cell spanning across two cells with the data presented once.
In this lecture we will be talking about creating longer tables using the <thead>, <tbody> and <tfoot> elements.
This lecture is a demonstration of old code. This code is only presented in this course in case you come across it across other, older, websites you won't be confused when you take a look at it. Of course this code is replaced by CSS in newer websites and that's the code you should use when doing anything related to designing a website. Files for lectures 19-22 are also available for download through Downloadable materials and External Resources on Dropbox.
In this lecture we talk about Forms and their basic structure (<form action="" method="">). We also talk about creating a Single-Line Text Input form <input type="text">.
In this lecture we talk about the Password forms (<input type="password">) and the Multi-Line Text Input forms <textarea>.
In this lecture we will create an date input form, using the date attribute in the <input> element.
In this lecture we talk about creating Radio Buttons (type="radio") and Checkboxes (type="checkbox"). Radio buttons are for choosing one option out of several options. Checkboxes are for choosing one, several or no options out of a list of checkbox options or even one checkbox like agreeing to the terms and conditions of a program.
In this lecture we learn about creating Drop Down List Boxes <select> and Multiple Selection Boxes <select multiple="multiple". Drop down list boxes are very useful in forms and we see them commonly when choosing a state and we can also use Multiple Selection Boxes for lists that may require more than one selection.
Learn to add a file input box to a form, name it assignment, and provide a submit button to upload files to a server using action and method attributes.
In this lecture we will grab an image of a button off of the internet and then proceed to implement it in our code. We will be using that image as a button on our webpage.
In this lecture we will learn about adding specific labels to our form controls, for both normal text boxes and radio buttons. This is to be done using the <label> element.
In this lecture we will talk about grouping related form controls inside the <fieldset> element. We will also talk about the <legend> element and how to use that in order for our fieldset to have a specific name.
In this lecture we will talk about validating forms. This helps ensure that the user is entering the correct information that the server will understand, making things go much more smoothly.
In this lecture we will talk about validations on URL and Email inputs. They are both done by default in HTML 5 once the type is set equal to "email" or "url". Files for lectures 23-33 are also available for download through Downloadable materials and External Resources on Dropbox.
In this lecture we talk about adding comments to our HTML code. Comments are never displayed on the webpage itself, but are very helpful when looking back at large loads of code.
Comment Code Example:
<!-- comment here -->
In this lecture we talk about setting up iframes. Iframes are basically a little window of another webpage that has been cut into your own webpage.
In this course, you will be comprehensively introduced to all the HTML tags and elements essential for web development. You will develop the skills needed to create a basic yet functional website incorporating images, text, links, forms, tables, and more. HTML forms the backbone of web development.
Through detailed examples and step-by-step walk-throughs, this course will guide you through the diverse array of HTML tags and elements. Each module is designed to build your confidence and competence, ensuring that you can apply what you learn to real-world scenarios. Additionally, if you encounter any difficulties while following along, you have the option to download the accompanying files and review the HTML code demonstrated in the videos at your own time and pace.
This hands-on approach ensures that by the end of this course, you will not only understand the theoretical aspects of HTML but also be able to practically apply these skills to create visually appealing and functional websites. You will gain valuable experience troubleshooting common issues, optimizing your code, and enhancing your problem-solving abilities. By practicing these skills regularly, you will become proficient and confident in web development. Join today and embark on your journey to becoming a skilled web developer!