Getting familiar with Web Development Technology

HTML

HTML is stand for hypertext markup language that use to create the structure of the web pages. Using HTML we can create hyperlink to other web page using text, images. And also it can clearly identified headings paragraphs separately. You can use sublime text, visual studio code or any other text editor like notepad.

h1 is the header you can use h1 to h6 according to priority of topics. p define paragraphs and href attribute use to put hyperlinks.
How html is used

CSS

Then you can use CSS to style the web pages. What is CSS? CSS stands for Cascading Style Sheet. This can manage the element that are in HTML file in a proper manner. There are 3 types that can use CSS styles. They are Inline CSS, Internal CSS file and External CSS files. But the most suitable thing is use external CSS file. Because then you can use one CSS file for all pages in website and also it is easy to manage the styles. If you want to add same styles for different places you can use classes or if you want to style an ideal element then you can use id selector. And also if you want to add same style for specific element then use element selector. The other thing is you can get element as group and style. See the example below and get the idea. Universal selector is use to if you want add some style for whole HTML page.

1st one is example for element selector. 2nd one is example for class selector. 3rd one for id selector. 4th one for group selector and 5th one for universal selector.
How to apply styles in a different ways

JAVA SCRIPT

OK!

Then how can you add the interactivity to your web pages. The best option is java script. Java script can change HTML element. For an example you can change the content of paragraph. The other thing is it can also change CSS styles of your web pages. The values that you allocate for attributes can be change by using java script. If you want to change or hide something then also you can use java script. In CSS internal styles are put in style tag. But in java script you have put in script tag. It can be in head or body tags. But the best practice is using external java script file. If something is going wrong then it is to correct if you use external java script file. Example below show how content change using java script.

Use of java script

FRAME WORK

Using frame you can do difficult task in the easy way. The other thing is using frame work it is easy to work with programming languages. Angular JS, React JS and Bootstrap are example for frame work. In this I include brief things about angular JS. Angular JS is java script frame work.

Angular

Directives

ng-app directives define angular JS application. ng-model directive use to bind the value to application data. This values get from input, textarea etc. ng-bind directive use to bind application data to the HTML content. ng-init and data-ng-init use to initialize variables in angular. Below example shows how can we use it.

Angular directives

Expressions

Angular JS expressions can put in {{ }} or ng-bind. It is also support to the filters. Using example get understanding about Angular JS expressions.

Angular Expression

Applications

We can create applications in Angular JS. It contain module and controller. Look at this example and get a brief idea about how it work. Change the value and see.

Angular Application

Databases

Databases store all data that use in the web page. Ex: Images, user information, contact information, passwords etc. Mainly it can be SQL or No SQL. SQL is can store data in a proper way in correctly and validity. But it is less flexible than No SQL.

Ex: MySQL, Oracle, MongoDB, PostgreSQL, MS Access

MySQL
MS Access

Browser

Browser use to request information and show the requested content in there users device. The device can be computer, mobile phone tablet or any other. How it shows different from device to device.

Google Chrome
Mozilla Firefox
Opera

Web server/ Protocols

Web server is the place where all CSS, java script, PHP, Database files are stored. Actually we can say web server is the host of web page. Protocols use to get website to the browser. There are different protocols such as HTTP, DDP. If we consider about HTTP protocol it is use to get website from server to the browser.

If client request a website using a URL then if it is there sending the file that regarding to the URL.

If not make a response by communicating database and script.

If the client request for the web page web server will search for that page. If the page found it will send to the client with an HTTP request.

If requested page not found, web server will send and http response.

Error 404 not found

Conclusion

This is a introduction for web development technology. Anyway we have go though these topics one by one. There are some other topics that we have to go though. I hope to give clear and complete content for each topic one by one in my next blogs.

Undergraduate university of moratuwa , faculty of Information Technology