Learn Web Design (Part 1)
Hello Steemians, welcome to my blog.
This is the first out of series of other tutorials to come on Web design.
Web design is simply creation of website. There are many other things associated with designing a functional website. The web design can be either Static or Dynamic.
I will be focusing mainly on Static Web design before moving to dynamic. Static web design utilizes basic HTML code via the use of softwares such as Notepad++ and Dreamweaver. HTML is acronym for HyperText Markup Language.
For this tutorial and subsequent ones, The Dreamweaver software will used. You can get the software at the closest computer store or download online. Install the software to kickstart your journey into the Web-design world.
Today, we are going to be discussing the Dreamweaver interface, some basic terms in Html.
Open your Dreamweaver software where you will be prompted to create a new document.
Since we are working with HTML, you have to make sure that the pagetype is selected as HTML and your DocType is HTML5. HTML5 is the latest HTML version that supports all codes. Afterwards, you need to click create. You will be presented with the blank Dreamweaver interface with some code words written there. You will understand this as we go on.
I will endeavour to explain how the interface works now.
The red pen highlight the Menu bar. Here, you can find the file button to save your work, the edit, command, format button that can be utilized in the course of your web design.
The blue pen highlight the current tab you are working on. As shown in the picture above, I am currently working on Untitled-6.
The black pen highlight the Document bar. Here, you can find tools that will be used in the course of this tutorial. It contains the code view, the design view, split view, and ability to preview in web browser.
The green pen highlight the body. This is where all our codes will be written
In the body, you can see
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
You wonder what those codes are. They are tags. Tags are used in HTML and most tags have an opening tag and also an end tags. For example <html> is an opening tag, while </html> is a closing tag. The difference in the closing tag is the inclusion of /.
The <!doctype html> there is automatically generated to indicate the current language you are working on. We chose HTML, therefore we are going to have HTML in there. We then have the <html> tag and the <head>tags respectively. The other meta charset tag is a language tag attribute. The next is the title tag which is currently named Untitled Document. All tags are closed by adding the / sign.
NB: HTML tags are always in lower case.
The first thing to do is to save your work. We are going to go to click on File at the Menu bar, then save as.
This will display an interface where we will choose the desired file name. You are advised to use index as the filename, then click save. This is because, when hosting your website, the homepage is the index file. Failure to find an index file means all your website files will be portrayed to the public to download and use.
You now need to change your Title at the Document bar highlighted with Green pen colour. I used Steemit tutorial for the purpose of this tutorial. Changing it and pressing Ctrl+S will make the Title change automatically in the Code body too.
When you have a tag like <title> Steemit tutorial </title>. The text Steemit tutorial in between the opening and closing tags is called ELEMENT. Any text in between an opening and closing tag is referred to as ELEMENT
That will be all for this tutorial. We will move to working with texts in the next tutorial.
Congratulations! Your post has been selected as a daily Steemit truffle! It is listed on rank 14 of all contributions awarded today. You can find the TOP DAILY TRUFFLE PICKS HERE.
I upvoted your contribution because to my mind your post is at least 6 SBD worth and should receive 83 votes. It's now up to the lovely Steemit community to make this come true.
I am
TrufflePig, an Artificial Intelligence Bot that helps minnows and content curators using Machine Learning. If you are curious how I select content, you can find an explanation here!Have a nice day and sincerely yours,
TrufflePigAs a follower of @followforupvotes this post has been randomly selected and upvoted! Enjoy your upvote and have a great day!
Hello! I find your post valuable for the wafrica community! Thanks for the great post! We encourage and support quality contents and projects from the West African region.
Do you have a suggestion, concern or want to appear as a guest author on WAfrica, join our discord server and discuss with a member of our curation team.
Don't forget to join us every Sunday by 20:30GMT for our Sunday WAFRO party on our discord channel. Thank you.