Welcome to today's lesson on web design. Today you'll learn about web design and a few of its concepts surrounding it. Specifically, this lesson will cover:
Web design is the practice of website development or any design output meant for the worldwide web. In order for a designer to begin designing for web, he or she must have a working knowledge of HTML or CSS languages.
HTML stands for Hyper Text Markup Language and is the dominant programming language for producing content on the web. CSS stands for Cascading Style Sheet and is a language that controls formatting of type, color, and spacing. They're both languages for web design, but HTML is what you would use to build structural layers, and CSS is what you would use for the presentation layers. So think of it kind of like HTML being the structure or building of a house, and CSS is for decorating it and making it look cool and awesome. Below are basic examples of HTML and CSS code.
In the HTML portion, you can see the first code or syntax for font size for a corresponding text. So the text that read "this is some text" is given a font size of 6 pixels. Then you have the background color of the main body and t's specified in what's called hex code. There is a set of six characters which could be numbers 0 through 1 or letters A through F and it corresponds to a color, the code corresponds to a color. Lastly, you have an example of how to place text in a new paragraph. So the text that reads "this is a paragraph" would be in its own paragraph using that code or syntax.
If you move onto CSS, remembering that, again, HTML is more like a building, and CSS is like the styling of it, for our font code or syntax, it stylizing the text. It's making it italic. You can bold it and do all sorts of crazy things with CSS, when it comes to font. Now for background color, it actually behaves practically the same way, but the syntax is different. The code is written differently than HTML. Then in the formatting you can do all sorts of things with CSS as well. So in this example, the heading 1 of H1 is placed in the center. You can see the syntax reads H1 text align center, so the first heading is going to be aligned in the center of the page.
If you open up a browser and see a website, source code is what went into making it look that way.
In the example above, you can see the HTML code at the bottom. Everything is encapsulated in this box from top to bottom.
There's also CSS in there as well, indicated by the style syntaxes. HTML and CSS are really good mates, so they lived together in the same source code. HTML provides it a nice structure for it to work with and make pretty.
So web design has a lot of great benefits as well, like its ability to have interactivity within its design or interactive design, which are apparent in a lot of the websites, like where if you mouse over elements, you get mouse-over actions. Another way to do this is through the ability to advertise with things like web banners, which are typically rectangular in shape, but can be either static or animated as well.
Now, even with increasing internet bandwidth and speed, one of the virtues of great web design is having an optimized design, which is to say to have a design that is efficient and effective as possible, so that it uses only the bandwidth that it needs so that it loads fast and it works smoothly for the end user.
Well, that wraps up this lesson. This lesson began with defining web design. Then it went on to explain the uses of HTML & CSS in web design. You got a chance to see web design in practice and ended with some of the benefits of web design.
Keep up the learning and have a great day!
Source: SOURCE: THIS WORK IS ADAPTED FROM SOPHIA AUTHOR MARIO E. HERNANDEZ
Web Design is the practice of website development or any design output meant for the world wide web.
HTML stands for Hyper Text Markup Language and is the dominant programming language for producing content on the web.
CSS stands for Cascading Style Sheet and is a language that controls formatting of type, color, and spacing.
Interactive design is the practice of developing digital interactivity for end users.
Mouse-over is an action done by a computer user operating a mouse and using the arrow to hover over parts of a graphical user interface or GUI.
Web Banner is an advertisement on the internet. Typically in the shape of a rectangle, web banners can be static or animated to reach the viewers attention.