To elaborate more on the introduction, you must keep in mind that part of learning to code is understanding that you are creating a user-friendly virtual environment. The basics of HTML and CSS coding include the main components that are needed to present information online, and therefore must primarily be readable and visually presentable.
HTML is used to implement the elements that will structure webpages and connect content that is relevant to the topic of your website. The elements will display the features you want to include on your website, such as headings, paragraphs, images, hyperlinks, list of items, and video clips. CSS works interchangeably with HTML by setting up the style and appearance of the elements you use in HTML to build your website.
It visually enchances the usability of websites across various digital platforms by showing how the features will be displayed logically and aesthetically. This process works through use of visual hierarchy in CSS styles and stylesheets with the consistent use of color schemes for backgrounds, text, hypertext, and borders; size of fonts used for text; image size; and layout of text and images. The following topics on this page cover the most common basic codes used in HTML and CSS:
Software you can download for coding are Brackets and Visual Studio Code. Look for the application that is compatible with your computer operating system and download the application.
Once you have the application downloaded to your computer, you can get started by starting a new document. It is highly recommended you go through the menu options of the application to begin a new HTML document accordingly. In coding HTML, tags are used to implement the element in between the less than sign and greater than signs in the beginning and in between the the less than sign and greater than signs with a forward slash before the defined element to close the tag.
When you are ready to begin, at the top of the HTML document, you must type <!DOCTYPE html> to declare that it is an HTML document you are working on. On the second line, you enter the opening tag for <html>. Then you enter the opening and closing tags for <head> Heading of HTML Document </head>, and <title> Title of HTML Document </title>. What you type for your head and title will not show on your html. It just lets you define the title of your html document.
However, the HTML elements for the main heading (h1) will diplay the title of your HTML document. After the heading,is the HTMl element for body, The opening tag for body is <body>. The body is where the composition of your webpage begins in your HTML document. It is where you will use codes for other headings like subheadings (h2, h3, h4, h5, and h6), paragraphs, images, lists, and other content. After you are done coding all your HTML elements, you must enter the closing tag for body, which is </body> at the end of the document and the closing tag for html, which is tagged as </html> at the last line of the document to end the codng.
Note: Every HTML element you use must have an opening tag before you enter the text or other content and the closing tag after you enter the text or other content as described in the above paragraphs on this site; otherwise, the element will not run on your webpage.
As described in the section for starting an HTML document, the elements you use to create the content for your webpage goes in the body of your HTML document. Elements in HTML define items you will use in your content. For example, headings are defined as H1, H2, H3, H4, H5, and H6. H1 is the largest size and used as a main heading for and H6 is the smallest size. H2 to H6 are used for subheadings. Headings are mainly used in structuring and organizing content in HTML. Now that you understand how tags are applied in defining the elements of HTML, it is essentially important on how they are used in starting and ending an HTML document. Otherwise, all your HTML tags will not be enabled. The following tags are used in coding basic elements in the body of your of HTML document:
Heading H1: <h1> </h1>
Heading H2: <h2> </h2>
Heading H3: <h3> </h3>
Heading H4: <h4> </h4>
Heading H5: <h5> </h5>
Heading H6: <h6> </h6>
Paragraphs:<p> </p>
In coding paragraphs, it is important to break up your paragraphs by using the opening and closing paragraph tags between 3 to 5 sentences. It is part of what makes a webpage readable in a way that the reader's eyes can flow easily down the page. It also helps users get quicker access to read the information they want to look for. If you code your paragraphs like a book, the reader may get impatient looking for information and might just exit out of your webpage instantly. Even though headings mainly structure and organize your content, it doesn't do all the work.
In breaking up paragraphs often times, you may need to use the single tag for <br> after each sentence so they can be strutured in separate lines. If not, you may have line one running across the page, which is not useful at all. The single tag, <hr> can be used for visible lines that break up sections and help webpages to also look more organized. They can also be used after titles. The single tags for br and hr don't have closing tags; they are used once for each time you use them on a your HTML document.
Other HTMl basic text formatting elements, such as bold text, italic text, underline text, and other types of HTML text formatting codes can be included with in the paragraph element. Below are some examples:
Bold: <b> Bold text </b>
Italic: <i> Italic text </i>
Underline: <u> Underline text </u>
Strong: <strong> Strong text </strong>
Emphasis: <em> Emphasis text </em>
Note: Special HTML text formatting elements, such as bold, italic, underline, emphasis, and strong text are useful in displaying an important word, sentence, or phrase within a paragraph. Other special HTML text formatting elements quotes and block quotes within a paragraph. For example, the HTML element for a quote is tagged as <q> This is a quote.
</q>. For more information on coding other types of quotes and citations, visit the webpage for HTML Quotation and Citation Elements.
Attributes in HTML control or modify behavior of how the HTML elements will run. They have additional features and characteristics about HTML elements and are included in opening and closing tags of HTML elements. For example, the html tag for image, which begins with <img> and ends with </img>, also has an attribute for links to external images from other websites.
If you want to insert an image after a paragraph you typed in your html document, the attribute for the HTML element for image is defined as <img src>, no closing tag for img src. The word 'src' defines the attribute to where the external link to that image is located. Let's say you want to insert a free image of Central Park in New York City that you found on a website or on Google.com. You click on that image, and save it as img_imagename.jpg in you local folder, and on your HTML document you type:
<img src="Img_central-park.jpg" width="900" height="500">.
Source: https://images.freeimages.com/images/large-previews/f65/central-park-1373215.jpg
In using this attribute for img src, you need to also enter the width and height you want your image to be on
your webpage as shown above this image. In addition, the image you save must be saved in the same folder
with the HTML document you used the image for. Otherwise, it will not be visible on your webpage.
Another important attribute is the HTML element for <a> which is an HTML element for links on your webpage. When you want a text to link to another website, you must include the whole URL in quotations within the opening tag, and include href as the attribute to link to external websites. For example, if you want to include the URL for a website called "The 5 Best Ways to Create a Website in 2021", you would type <a href="https://www.oberlo.com/blog/how-to-create-a-website"> Then type the name of the webpage, which can be 5 Best Ways to Create a Website in 2021. Therefore, the HTML tag is:
<a href="https://www.oberlo.com/blog/how-to-create-a-website"> 5 Best Ways to Create a Website in 2021 </a>.
Notice how the URL in the opening tag includes 'http://www.' to locate the website and not only 'www.' without http. In addition, the link must contain text after the opening tag which can be the title of the website or a description. Last, but not least, remember to include the closing tag </a> as shown after the title of the webpage. Be sure to include all the tags and attribute for this html element. Otherwise, the hyperlink will not be enabled.
CSS works with HTML to add style to some of the elements you use to code in designing your webpage. It is what enhances the presentation and layout of your website. There are many types of CSS styles to include in your HTML document. The main CSS codes you will need most are for headings; paragraphs; background for pages, text, and paragraphs; color for text, paragraphs, and borders; and different fonts for text and paragraphs. In CSS coding, the property of the style is declared after the HTML element is defined.
In the HTML opening tag, the equal (=) sign is placed after the HTML element followed by the property and value of the property in parenthesis and ends with a semicolon, closing parenthesis, and the greater than sign. Then you enter the text, phrase, or other content that you want to apply the CSS style to. Then you close the CSS code with the HTML closing tag. A useful way to remember how to apply a CSS code is referencing a property and value formula, such as:
<element style = "property: value;"> </element>. Below are some basic examples of CSS codes:
Paragraph/Text Color:<p style = "color: orangered;"> The text color of this paragraph is orange red. </p>
The text color of this paragraph is orange red.
Paragraph/Text Font:<p style = "font-family: helvetica;"> The font for this text is Helvetica.</p>
The font for this text is Helvetica.
Paragraph/Text Alignment: <p style = "text-align: center;"> This text is centered. </p>
This text is centered.
Paragraph/Text Background: <p style = "background-color; lightgreen"> This paragraph has a light green background.</p>
This paragraph has a light green background.
Bold Paragraph/Text: <b style = "color: violet;"> The color of this bold text is dark violet.</p>
The color of this bold text is dark violet.
Note: The properties given in the examples above are have a style attributed to the elements defined in the opening tag for paragraphs. The values defined the style of those properties for font-family, color, and background. If you want to apply a background color for the whole page or site, you use the CSS style in the HTML element for body, which is <body style="background-color: colorname;"> Text </body>. CSS color styles can be applied to headings as well using background or foreground colors. Heading levels must be specified. For example, if you are going to use an h3 subheading, your code would be <h3> style="color: colorname;"> Heading </h3> . Keep in mind that there are no spaces between color names in HTML and CSS codes.
There are many ways to style up your webpage with HTML and CSS coding for other properties, such as border styles, list order styles, image styles, etc. Visit the website for A Sorted List of CSS Code Examples: Master Styling HTML Elements . In CSS coding, you can also create CSS stylesheets and use them as formatting templates, and link them to your HTML document. If you create a CSS stylesheet, they must be saved in the same folder as your HTML document, and saved with a .css extension. You can visit HTML.com to learn how to create, link, and save CSS stylesheets.
It is always helpful to save your html document the same file name as your title. However, all html file names should not have any spaces. The file names can include dashes (-) and underscore (_) between the text. In saving your HTML file, the extension must always be .html at the end of the HTML file name. Example of HTML file names are My-Biography.html, About_Me.html, and My-Portfolio.html.