Boiler Plate
The boiler plate is code you put before every HTML code page, it helps format your page and makes it work aross different browsers.
The boiler plate is code you put before every HTML code page, it helps format your page and makes it work aross different browsers.
Links are made by using the anchor element followed by the href attribute with the value of whatever url that needs to be used. Then use a > to finish off the element. Then put whatever text you want the link to say right after. Then follow that with </a>.
Making images is very similar to this process, except it is a void element. You make an image by using the img element followed by the src attribute. Again, the attributes value is the url of the image
Side Note: In order to make images url's, you need to do it on an external website. Here is an example of a website that does this.
Image to URL GeneratorYou will mainly use the div element when you want to group HTML elements that will share a set of CSS styles. It is not semantic and should not be worried about until I learn CSS.
ID's add a unique intentifier to HTML elements. They allow them to be refrenced for CSS, Javascript, and Hyperlinks. Only one ID can be used per page. They are an attribute that can be added to most html element with the value being a hashtag followed by a unique value of letters, dashes, underscores, and digits.
Here is an example of an ID being added to an h1 element
Classes are similar ID's with one major difference. Classes are used to apply a style or styles to multiple elements. Multiple class values can be added to an element by adding a space between each class. Class attributes are used in div elements.
HTML Entites are a series of characters used to make a special character. They start with a & and end with a ; with a couple of lowercase letters in between. An example would be the & symbol. Here is the entity for that symbol.
The script element is used to embed javascript within a HTML element. It is not a void element and can used by the src attribute to locate external scripts.
SEO is how you describe your website to search engines so they rank higher and apear more ofter in peoples searches. One way to do this is through the meta element, which is known as meta description.
One way the meta element works is by 2 attributes, name and content. The name attribute should be set to description. This lets the browser to better interpret the information. The second value is content. The value of that attribute should be set to the description of your website.
Open graph tags control how your website looks on different platforms. To add open grapg tags you use the meta element with 2 important attributes: content and properties. There is many properties but ill cover 4 different types of proerties that are nessesary.
og:title is a type of value for the property attribute. When it is used, the content attributes value should be set to what you want your title to be across different websites.
og:type is another value for the properties attribute. The purpose of this attribute is to represent the type of media the website contains. This means the value of content could be website, audio or video, article, ect.
This value for the property attribute is very similar to the img element. The purpose of it is to show an image when the website is displayed across platforms. It is used by making the content's attribute's value a url of an image. That simple.
This value of the property attribute is very similar to the href element. It is used to link your website when shown on platforms. The content attribute should just be the url of your website
Audio and video elements allow you to display options to play a video or audio. They aren't void elements, and there is numerous attributes that go along with it but aren't too complicated.
Audio and video elements work with a src attribute to put a url. But to make it work, you need some boolean attributes.
Here is a list of the following boolean attributes and what they do
The source element allows you to add different types of audio/video elements in case a browser doesen't support a media option.
They work by putting the source element inside the video/audio element with a src and type attribute.
You use the src attribute just to put the media file and the type attribute for what type of media file you used such as ogg, wave, or mpeg.
Iframe, which stands for inline frame, is a way to show external media within a box. This media can include videos, pictures, maps, websites, ect.
There is a number of attributes that you need to make iframes. These include width, height, src, title, allow, and allowfullscreen just to name the basic nessesary ones.
Width and height control how long the width and height of your iframe. To use these attributes, set the value to how many pixles you want it long.
As you already know, the src attribute allows you to link media to your iframe.
The title element adds a title to your iframe. This attribute is very important for accessability purposes.
This attribute controls what your iframe can and can't do. Here's a list of the most important values
This allows the user to display iframe in fullscreen mode.