{"id":2745,"date":"2025-06-07T15:03:21","date_gmt":"2025-06-07T15:03:21","guid":{"rendered":"https:\/\/diznr.com\/?p=2745"},"modified":"2025-06-07T15:03:21","modified_gmt":"2025-06-07T15:03:21","slug":"internet-and-web-technology-lecture-concept-of-scriptphp-htmljava","status":"publish","type":"post","link":"https:\/\/www.reilsolar.com\/pdf\/internet-and-web-technology-lecture-concept-of-scriptphp-htmljava\/","title":{"rendered":"Internet and Web Technology lecture &#8211; Concept of HTML,Java Script,Php"},"content":{"rendered":"<p>Internet and Web Technology lecture &#8211; Concept of HTML,Java Script,Php<\/p>\n<p>[fvplayer id=&#8221;93&#8243;]<\/p>\n<h3 data-start=\"0\" data-end=\"46\"><strong data-start=\"2\" data-end=\"44\">\u00a0Internet and Web Technology Lecture<\/strong><\/h3>\n<h3 class=\"\" data-start=\"47\" data-end=\"93\"><strong data-start=\"51\" data-end=\"91\">Concept of HTML, JavaScript, and PHP<\/strong><\/h3>\n<p class=\"\" data-start=\"95\" data-end=\"348\">The <strong data-start=\"99\" data-end=\"130\">Internet and Web Technology<\/strong> domain consists of three key technologies:<br data-start=\"173\" data-end=\"176\" \/><strong data-start=\"180\" data-end=\"216\">HTML (HyperText Markup Language)<\/strong> \u2192 Structure of Web Pages<br data-start=\"241\" data-end=\"244\" \/><strong data-start=\"248\" data-end=\"262\">JavaScript<\/strong> \u2192 Adds Interactivity<br data-start=\"283\" data-end=\"286\" \/><strong data-start=\"290\" data-end=\"322\">PHP (Hypertext Preprocessor)<\/strong> \u2192 Server-Side Scripting<\/p>\n<h3 data-start=\"355\" data-end=\"398\"><strong data-start=\"358\" data-end=\"398\">\u00a0HTML (HyperText Markup Language)<\/strong><\/h3>\n<p class=\"\" data-start=\"399\" data-end=\"623\"><strong data-start=\"402\" data-end=\"442\">HTML is the foundation of web pages.<\/strong><br data-start=\"442\" data-end=\"445\" \/>\u00a0It is a <strong data-start=\"456\" data-end=\"475\">markup language<\/strong> that defines the <strong data-start=\"493\" data-end=\"506\">structure<\/strong> of a webpage using <strong data-start=\"526\" data-end=\"534\">tags<\/strong>.<br data-start=\"535\" data-end=\"538\" \/>\u00a0HTML is <strong data-start=\"549\" data-end=\"579\">not a programming language<\/strong> (it does not support logic or functions).<\/p>\n<p class=\"\" data-start=\"625\" data-end=\"654\"><strong data-start=\"627\" data-end=\"652\">Basic HTML Structure:<\/strong><\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary\">\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre language-html\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-keyword\">html<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span><\/span>&gt;My Web Page<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span><\/span>&gt;Welcome to Web Technology<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span><\/span>&gt;This is a simple HTML page.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span><\/span>&gt;<br \/>\n<\/code><\/div>\n<\/div>\n<p class=\"\" data-start=\"838\" data-end=\"864\"><strong data-start=\"840\" data-end=\"862\">Tags used in HTML:<\/strong><\/p>\n<ul data-start=\"865\" data-end=\"1027\">\n<li class=\"\" data-start=\"865\" data-end=\"896\">\n<p class=\"\" data-start=\"867\" data-end=\"896\"><code data-start=\"867\" data-end=\"873\">&lt;h1&gt;<\/code> to <code data-start=\"877\" data-end=\"883\">&lt;h6&gt;<\/code> \u2192 Headings<\/p>\n<\/li>\n<li class=\"\" data-start=\"897\" data-end=\"918\">\n<p class=\"\" data-start=\"899\" data-end=\"918\"><code data-start=\"899\" data-end=\"904\">&lt;p&gt;<\/code> \u2192 Paragraph<\/p>\n<\/li>\n<li class=\"\" data-start=\"919\" data-end=\"944\">\n<p class=\"\" data-start=\"921\" data-end=\"944\"><code data-start=\"921\" data-end=\"934\">&lt;a href=\"\"&gt;<\/code> \u2192 Links<\/p>\n<\/li>\n<li class=\"\" data-start=\"945\" data-end=\"972\">\n<p class=\"\" data-start=\"947\" data-end=\"972\"><code data-start=\"947\" data-end=\"961\">&lt;img src=\"\"&gt;<\/code> \u2192 Images<\/p>\n<\/li>\n<li class=\"\" data-start=\"973\" data-end=\"995\">\n<p class=\"\" data-start=\"975\" data-end=\"995\"><code data-start=\"975\" data-end=\"984\">&lt;table&gt;<\/code> \u2192 Tables<\/p>\n<\/li>\n<li class=\"\" data-start=\"996\" data-end=\"1027\">\n<p class=\"\" data-start=\"998\" data-end=\"1027\"><code data-start=\"998\" data-end=\"1006\">&lt;form&gt;<\/code> \u2192 User input forms<\/p>\n<\/li>\n<\/ul>\n<p class=\"\" data-start=\"1029\" data-end=\"1108\"><strong data-start=\"1032\" data-end=\"1072\">HTML alone cannot add interactivity.<\/strong> That\u2019s where JavaScript comes in.<\/p>\n<h3 data-start=\"1115\" data-end=\"1171\"><strong data-start=\"1118\" data-end=\"1136\">\u00a0JavaScript<\/strong> (Client-Side Scripting Language)<\/h3>\n<p class=\"\" data-start=\"1172\" data-end=\"1343\"><strong data-start=\"1175\" data-end=\"1230\">JavaScript makes web pages dynamic and interactive.<\/strong><br data-start=\"1230\" data-end=\"1233\" \/>\u00a0Runs <strong data-start=\"1241\" data-end=\"1263\">inside the browser<\/strong> (client-side).<br data-start=\"1278\" data-end=\"1281\" \/>\u00a0Used for <strong data-start=\"1293\" data-end=\"1340\">validations, animations, and event handling<\/strong>.<\/p>\n<p class=\"\" data-start=\"1345\" data-end=\"1384\"><strong data-start=\"1347\" data-end=\"1382\">Example &#8211; JavaScript Alert Box:<\/strong><\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary\">\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-title function_\">alert<\/span>(<span class=\"hljs-string\">\"Hello! Welcome to Web Technology\"<\/span>);<br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span><\/span>&gt;<br \/>\n<\/code><\/div>\n<\/div>\n<p class=\"\" data-start=\"1464\" data-end=\"1512\"><strong data-start=\"1466\" data-end=\"1510\">Example &#8211; JavaScript Button Click Event:<\/strong><\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary\">\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\">\n<p><code class=\"!whitespace-pre language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span><\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"showMessage()\"<\/span>&gt;Click Me<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span><\/span>&gt;<\/code><\/p>\n<p><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title function_\">showMessage<\/span>() {<br \/>\n<span class=\"hljs-title function_\">alert<\/span>(<span class=\"hljs-string\">&#8220;Button Clicked!&#8221;<\/span>);<br \/>\n}<br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span><\/span>&gt;<\/p>\n<\/div>\n<\/div>\n<p class=\"\" data-start=\"1665\" data-end=\"1799\">\u00a0JavaScript is often used with <strong data-start=\"1697\" data-end=\"1711\">HTML &amp; CSS<\/strong> to create interactive web pages.<br data-start=\"1744\" data-end=\"1747\" \/>\u00a0To handle <strong data-start=\"1759\" data-end=\"1780\">server-side tasks<\/strong>, we use <strong data-start=\"1789\" data-end=\"1796\">PHP<\/strong>.<\/p>\n<h3 data-start=\"1806\" data-end=\"1845\"><strong data-start=\"1809\" data-end=\"1845\">\u00a0PHP (Hypertext Preprocessor)<\/strong><\/h3>\n<p class=\"\" data-start=\"1846\" data-end=\"2021\"><strong data-start=\"1849\" data-end=\"1893\">PHP is a server-side scripting language.<\/strong><br data-start=\"1893\" data-end=\"1896\" \/>\u00a0Used for <strong data-start=\"1908\" data-end=\"1970\">dynamic web pages, form handling, and database connections<\/strong>.<br data-start=\"1971\" data-end=\"1974\" \/>\u00a0Runs on <strong data-start=\"1985\" data-end=\"2000\">web servers<\/strong> (not in browsers).<\/p>\n<p class=\"\" data-start=\"2023\" data-end=\"2056\"><strong data-start=\"2025\" data-end=\"2054\">Example &#8211; PHP Basic Code:<\/strong><\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary\">\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre language-php\"><span class=\"hljs-meta\">&lt;?php<\/span><br \/>\n<span class=\"hljs-keyword\">echo<\/span> <span class=\"hljs-string\">\"Hello, PHP!\"<\/span>;<br \/>\n<span class=\"hljs-meta\">?&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<p class=\"\" data-start=\"2098\" data-end=\"2134\"><strong data-start=\"2100\" data-end=\"2132\">Example &#8211; PHP Form Handling:<\/strong><\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary\">\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre language-php\">&lt;form method=<span class=\"hljs-string\">\"POST\"<\/span> action=<span class=\"hljs-string\">\"process.php\"<\/span>&gt;<br \/>\nEnter Name: &lt;input type=<span class=\"hljs-string\">\"text\"<\/span> name=<span class=\"hljs-string\">\"username\"<\/span>&gt;<br \/>\n&lt;input type=<span class=\"hljs-string\">\"submit\"<\/span> value=<span class=\"hljs-string\">\"Submit\"<\/span>&gt;<br \/>\n&lt;\/form&gt;<br \/>\n<\/code><\/div>\n<\/div>\n<p class=\"\" data-start=\"2289\" data-end=\"2334\"><strong data-start=\"2292\" data-end=\"2332\">process.php (Server-Side Processing)<\/strong><\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary\">\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre language-php\"><span class=\"hljs-meta\">&lt;?php<\/span><br \/>\n<span class=\"hljs-variable\">$name<\/span> = <span class=\"hljs-variable\">$_POST<\/span>[<span class=\"hljs-string\">'username'<\/span>];<br \/>\n<span class=\"hljs-keyword\">echo<\/span> <span class=\"hljs-string\">\"Welcome, \"<\/span> . <span class=\"hljs-variable\">$name<\/span>;<br \/>\n<span class=\"hljs-meta\">?&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<p class=\"\" data-start=\"2410\" data-end=\"2479\">\u00a0PHP interacts with <strong data-start=\"2431\" data-end=\"2444\">databases<\/strong> like <strong data-start=\"2450\" data-end=\"2459\">MySQL<\/strong> for data storage.<\/p>\n<h3 data-start=\"2486\" data-end=\"2537\"><strong data-start=\"2489\" data-end=\"2535\">\u00a0Comparison of HTML, JavaScript, and PHP<\/strong><\/h3>\n<div class=\"overflow-x-auto contain-inline-size\">\n<table data-start=\"2538\" data-end=\"2914\">\n<thead data-start=\"2538\" data-end=\"2592\">\n<tr data-start=\"2538\" data-end=\"2592\">\n<th data-start=\"2538\" data-end=\"2553\"><strong data-start=\"2540\" data-end=\"2551\">Feature<\/strong><\/th>\n<th data-start=\"2553\" data-end=\"2564\"><strong data-start=\"2555\" data-end=\"2563\">HTML<\/strong><\/th>\n<th data-start=\"2564\" data-end=\"2581\"><strong data-start=\"2566\" data-end=\"2580\">JavaScript<\/strong><\/th>\n<th data-start=\"2581\" data-end=\"2592\"><strong data-start=\"2583\" data-end=\"2590\">PHP<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-start=\"2645\" data-end=\"2914\">\n<tr data-start=\"2645\" data-end=\"2723\">\n<td><strong data-start=\"2647\" data-end=\"2655\">Type<\/strong><\/td>\n<td>Markup Language<\/td>\n<td>Client-Side Scripting<\/td>\n<td>Server-Side Scripting<\/td>\n<\/tr>\n<tr data-start=\"2724\" data-end=\"2768\">\n<td><strong data-start=\"2726\" data-end=\"2737\">Runs On<\/strong><\/td>\n<td>Browser<\/td>\n<td>Browser<\/td>\n<td>Server<\/td>\n<\/tr>\n<tr data-start=\"2769\" data-end=\"2833\">\n<td><strong data-start=\"2771\" data-end=\"2782\">Purpose<\/strong><\/td>\n<td>Structure<\/td>\n<td>Interactivity<\/td>\n<td>Backend Processing<\/td>\n<\/tr>\n<tr data-start=\"2834\" data-end=\"2914\">\n<td><strong data-start=\"2836\" data-end=\"2851\">Example Use<\/strong><\/td>\n<td><code data-start=\"2854\" data-end=\"2870\">&lt;h1&gt;Title&lt;\/h1&gt;<\/code><\/td>\n<td><code data-start=\"2873\" data-end=\"2890\">alert(\"Hello!\")<\/code><\/td>\n<td><code data-start=\"2893\" data-end=\"2912\">echo \"Hello PHP\";<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h3 class=\"\" data-start=\"2921\" data-end=\"2941\"><strong data-start=\"2925\" data-end=\"2939\">\u00a0Summary<\/strong><\/h3>\n<p class=\"\" data-start=\"2942\" data-end=\"3133\"><strong data-start=\"2944\" data-end=\"2952\">HTML<\/strong> \u2192 Defines <strong data-start=\"2963\" data-end=\"2976\">Structure<\/strong> of the Web Page.<br data-start=\"2993\" data-end=\"2996\" \/><strong data-start=\"2998\" data-end=\"3012\">JavaScript<\/strong> \u2192 Adds <strong data-start=\"3020\" data-end=\"3037\">Interactivity<\/strong> (Runs on the browser).<br data-start=\"3060\" data-end=\"3063\" \/><strong data-start=\"3065\" data-end=\"3072\">PHP<\/strong> \u2192 Handles <strong data-start=\"3083\" data-end=\"3109\">Server-Side Processing<\/strong> (Runs on the server).<\/p>\n<p class=\"\" data-start=\"3135\" data-end=\"3192\">\u00a0<strong data-start=\"3138\" data-end=\"3192\" data-is-last-node=\"\">Would you like a detailed example on any topic?<\/strong><\/p>\n<h3 data-start=\"3135\" data-end=\"3192\"><a href=\"https:\/\/www.vssut.ac.in\/lecture_notes\/lecture1423183400.pdf\" target=\"_blank\" rel=\"noopener\">Internet and Web Technology lecture &#8211; Concept of HTML,Java Script,Php<\/a><\/h3>\n<h3 class=\"LC20lb MBeuO DKV0Md\"><a href=\"https:\/\/sriindu.ac.in\/wp-content\/uploads\/2023\/02\/R20CSE3104-Web-Technologies.pdf\" target=\"_blank\" rel=\"noopener\">Introduction to Internet, World Wide Web, Web Browsers, &#8230;<\/a><\/h3>\n<h3 class=\"LC20lb MBeuO DKV0Md\"><a href=\"https:\/\/womengovtcollegevisakha.ac.in\/departments\/Learning%20PHP,%20MySQL,%20JavaScript,%20CSS%20&amp;%20HTML5_%20A%20Step-by-Step%20Guide%20to%20Creating%20Dynamic%20Websites%20(%20PDFDrive%20).pdf\" target=\"_blank\" rel=\"noopener\">Learning PHP, MySQL, JavaScript, CSS \\&amp; HTML5<\/a><\/h3>\n<h3 class=\"LC20lb MBeuO DKV0Md\"><a href=\"https:\/\/www.recw.ac.in\/v1.8\/wp-content\/uploads\/2021\/04\/WIT-Unit-1.pdf\" target=\"_blank\" rel=\"noopener\">web &amp; internet technologies (15a05605)<\/a><\/h3>\n<h3 class=\"LC20lb MBeuO DKV0Md\"><a href=\"https:\/\/www.lpude.in\/SLMs\/Master%20of%20Computer%20Applications\/Sem_2\/DECAP472_WEB_TECHNOLOGIES.pdf\" target=\"_blank\" rel=\"noopener\">Web Technologies<\/a><\/h3>\n<p data-start=\"0\" data-end=\"74\"><span class=\"relative -mx-px my-[-0.2rem] rounded px-px py-[0.2rem] transition-colors duration-100 ease-in-out\">Certainly! Here&#8217;s an overview of <strong data-start=\"33\" data-end=\"66\">Internet and Web Technologies<\/strong>, focusing on the core components: <strong data-start=\"101\" data-end=\"109\">HTML<\/strong>, <strong data-start=\"111\" data-end=\"125\">JavaScript<\/strong>, and <strong data-start=\"131\" data-end=\"138\">PHP<\/strong>.<\/span><\/p>\n<hr data-start=\"76\" data-end=\"79\" \/>\n<h2 data-start=\"81\" data-end=\"125\">\ud83c\udf10 Internet and Web Technologies Overview<\/h2>\n<p data-start=\"127\" data-end=\"241\"><span class=\"relative -mx-px my-[-0.2rem] rounded px-px py-[0.2rem] transition-colors duration-100 ease-in-out\">Web development involves both <strong data-start=\"30\" data-end=\"45\">client-side<\/strong> (front-end) and <strong data-start=\"62\" data-end=\"77\">server-side<\/strong> (back-end) technologies.<\/span> <span class=\"relative -mx-px my-[-0.2rem] rounded px-px py-[0.2rem] transition-colors duration-100 ease-in-out\">Understanding how these components interact is crucial for building dynamic and interactive websites.<\/span><\/p>\n<hr data-start=\"243\" data-end=\"246\" \/>\n<h2 data-start=\"248\" data-end=\"289\">\ud83e\uddf1 1. HTML (HyperText Markup Language)<\/h2>\n<ul data-start=\"291\" data-end=\"708\">\n<li data-start=\"291\" data-end=\"345\">\n<p data-start=\"293\" data-end=\"345\"><strong data-start=\"293\" data-end=\"304\">Purpose<\/strong>: <span class=\"relative -mx-px my-[-0.2rem] rounded px-px py-[0.2rem] transition-colors duration-100 ease-in-out\">Defines the <strong data-start=\"12\" data-end=\"37\">structure and content<\/strong> of web pages.<\/span><\/p>\n<\/li>\n<li data-start=\"346\" data-end=\"406\">\n<p data-start=\"348\" data-end=\"406\"><strong data-start=\"348\" data-end=\"365\">Functionality<\/strong>: <span class=\"relative -mx-px my-[-0.2rem] rounded px-px py-[0.2rem] transition-colors duration-100 ease-in-out\">Uses elements like <code data-start=\"19\" data-end=\"27\">&lt;head&gt;<\/code>, <code data-start=\"29\" data-end=\"37\">&lt;body&gt;<\/code>, <code data-start=\"39\" data-end=\"44\">&lt;p&gt;<\/code>, <code data-start=\"46\" data-end=\"51\">&lt;a&gt;<\/code>, <code data-start=\"53\" data-end=\"60\">&lt;div&gt;<\/code>, etc., to organize content.<\/span><\/p>\n<\/li>\n<li data-start=\"407\" data-end=\"617\">\n<p data-start=\"409\" data-end=\"421\"><strong data-start=\"409\" data-end=\"420\">Example<\/strong>:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]\">html<\/div>\n<div class=\"sticky top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs\"><button class=\"flex gap-1 items-center select-none px-4 py-1\" aria-label=\"Copy\">Copy<\/button><span class=\"\" data-state=\"closed\"><button class=\"flex items-center gap-1 px-4 py-1 select-none\">Edit<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"whitespace-pre! language-html\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-keyword\">html<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span><\/span>&gt;My First Web Page<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span><\/span>&gt;Welcome!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span><\/span>&gt;This is a paragraph.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span><\/span>&gt;<br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span><\/span>&gt;<br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<li data-start=\"618\" data-end=\"708\">\n<p data-start=\"620\" data-end=\"708\"><strong data-start=\"620\" data-end=\"628\">Note<\/strong>: <span class=\"relative -mx-px my-[-0.2rem] rounded px-px py-[0.2rem] transition-colors duration-100 ease-in-out\">HTML is a <strong data-start=\"10\" data-end=\"29\">markup language<\/strong>, not a programming language.<\/span><\/p>\n<\/li>\n<\/ul>\n<hr data-start=\"710\" data-end=\"713\" \/>\n<h2 data-start=\"715\" data-end=\"739\">\u2699\ufe0f 2. JavaScript (JS)<\/h2>\n<ul data-start=\"741\" data-end=\"1046\">\n<li data-start=\"741\" data-end=\"795\">\n<p data-start=\"743\" data-end=\"795\"><strong data-start=\"743\" data-end=\"754\">Purpose<\/strong>: <span class=\"relative -mx-px my-[-0.2rem] rounded px-px py-[0.2rem] transition-colors duration-100 ease-in-out\">Adds <strong data-start=\"5\" data-end=\"43\">interactivity and dynamic behavior<\/strong> to web pages.<\/span><\/p>\n<\/li>\n<li data-start=\"796\" data-end=\"856\">\n<p data-start=\"798\" data-end=\"856\"><strong data-start=\"798\" data-end=\"815\">Functionality<\/strong>: <span class=\"relative -mx-px my-[-0.2rem] rounded px-px py-[0.2rem] transition-colors duration-100 ease-in-out\">Can manipulate HTML elements, handle events, validate forms, and more.<\/span><\/p>\n<\/li>\n<li data-start=\"857\" data-end=\"948\">\n<p data-start=\"859\" data-end=\"871\"><strong data-start=\"859\" data-end=\"870\">Example<\/strong>:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]\">html<\/div>\n<div class=\"sticky top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs\"><button class=\"flex gap-1 items-center select-none px-4 py-1\" aria-label=\"Copy\">Copy<\/button><span class=\"\" data-state=\"closed\"><button class=\"flex items-center gap-1 px-4 py-1 select-none\">Edit<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"whitespace-pre! language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span><\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"alert('Hello, World!')\"<\/span>&gt;Click Me<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span><\/span>&gt;<br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<li data-start=\"949\" data-end=\"1046\">\n<p data-start=\"951\" data-end=\"1046\"><strong data-start=\"951\" data-end=\"966\">Integration<\/strong>: <span class=\"relative -mx-px my-[-0.2rem] rounded px-px py-[0.2rem] transition-colors duration-100 ease-in-out\">Works closely with the <strong data-start=\"23\" data-end=\"54\">Document Object Model (DOM)<\/strong> to interact with page elements.<\/span><\/p>\n<\/li>\n<\/ul>\n<hr data-start=\"1048\" data-end=\"1051\" \/>\n<h2 data-start=\"1053\" data-end=\"1091\">\ud83d\udda5\ufe0f 3. PHP (Hypertext Preprocessor)<\/h2>\n<ul data-start=\"1093\" data-end=\"1392\">\n<li data-start=\"1093\" data-end=\"1147\">\n<p data-start=\"1095\" data-end=\"1147\"><strong data-start=\"1095\" data-end=\"1106\">Purpose<\/strong>: <span class=\"relative -mx-px my-[-0.2rem] rounded px-px py-[0.2rem] transition-colors duration-100 ease-in-out\">A <strong data-start=\"2\" data-end=\"36\">server-side scripting language<\/strong> used to create dynamic web content.<\/span><\/p>\n<\/li>\n<li data-start=\"1148\" data-end=\"1208\">\n<p data-start=\"1150\" data-end=\"1208\"><strong data-start=\"1150\" data-end=\"1167\">Functionality<\/strong>: <span class=\"relative -mx-px my-[-0.2rem] rounded px-px py-[0.2rem] transition-colors duration-100 ease-in-out\">Processes data, manages sessions, interacts with databases, and generates HTML dynamically.<\/span><\/p>\n<\/li>\n<li data-start=\"1209\" data-end=\"1296\">\n<p data-start=\"1211\" data-end=\"1223\"><strong data-start=\"1211\" data-end=\"1222\">Example<\/strong>:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]\">php<\/div>\n<div class=\"sticky top-9\">\n<div class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\n<div class=\"bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs\"><button class=\"flex gap-1 items-center select-none px-4 py-1\" aria-label=\"Copy\">Copy<\/button><span class=\"\" data-state=\"closed\"><button class=\"flex items-center gap-1 px-4 py-1 select-none\">Edit<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"whitespace-pre! language-php\"><span class=\"hljs-meta\">&lt;?php<\/span><br \/>\n<span class=\"hljs-keyword\">echo<\/span> <span class=\"hljs-string\">\"Today's date is \"<\/span> . <span class=\"hljs-title function_ invoke__\">date<\/span>(<span class=\"hljs-string\">\"Y-m-d\"<\/span>);<br \/>\n<span class=\"hljs-meta\">?&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<\/li>\n<li data-start=\"1297\" data-end=\"1392\">\n<p data-start=\"1299\" data-end=\"1392\"><strong data-start=\"1299\" data-end=\"1312\">Execution<\/strong>: <span class=\"relative -mx-px my-[-0.2rem] rounded px-px py-[0.2rem] transition-colors duration-100 ease-in-out\">Runs on the server, and the output is sent to the client&#8217;s browser as plain HTML.<\/span><\/p>\n<\/li>\n<\/ul>\n<hr data-start=\"1394\" data-end=\"1397\" \/>\n<h2 data-start=\"1399\" data-end=\"1430\">\ud83d\udd04 Client-Server Interaction<\/h2>\n<p data-start=\"1432\" data-end=\"1510\"><span class=\"relative -mx-px my-[-0.2rem] rounded px-px py-[0.2rem] transition-colors duration-100 ease-in-out\">In a typical web application:<\/span><\/p>\n<ol data-start=\"1512\" data-end=\"1679\">\n<li data-start=\"1512\" data-end=\"1554\">\n<p data-start=\"1515\" data-end=\"1554\"><span class=\"relative -mx-px my-[-0.2rem] rounded px-px py-[0.2rem] transition-colors duration-100 ease-in-out\">The <strong data-start=\"4\" data-end=\"14\">client<\/strong> (browser) sends a request to the <strong data-start=\"48\" data-end=\"58\">server<\/strong>.<\/span><\/p>\n<\/li>\n<li data-start=\"1555\" data-end=\"1597\">\n<p data-start=\"1558\" data-end=\"1597\"><span class=\"relative -mx-px my-[-0.2rem] rounded px-px py-[0.2rem] transition-colors duration-100 ease-in-out\">The <strong data-start=\"4\" data-end=\"14\">server<\/strong> processes the request using PHP, interacts with databases if necessary, and sends back an HTML response.<\/span><\/p>\n<\/li>\n<li data-start=\"1598\" data-end=\"1679\">\n<p data-start=\"1601\" data-end=\"1679\"><span class=\"relative -mx-px my-[-0.2rem] rounded px-px py-[0.2rem] transition-colors duration-100 ease-in-out\">The <strong data-start=\"4\" data-end=\"14\">client<\/strong> renders the HTML, and JavaScript can further enhance interactivity on the page.<\/span><\/p>\n<\/li>\n<\/ol>\n<hr data-start=\"1681\" data-end=\"1684\" \/>\n<h2 data-start=\"1686\" data-end=\"1718\">\ud83d\udcda Further Learning Resources<\/h2>\n<ul data-start=\"1720\" data-end=\"2052\">\n<li data-start=\"1720\" data-end=\"1849\">\n<p data-start=\"1722\" data-end=\"1849\"><strong data-start=\"1722\" data-end=\"1740\">Tutorial Video<\/strong>: Web Development Tutorial with HTML, CSS, JavaScript, and PHP<\/p>\n<\/li>\n<li data-start=\"1850\" data-end=\"1970\">\n<p data-start=\"1852\" data-end=\"1970\"><strong data-start=\"1852\" data-end=\"1875\">Comprehensive Guide<\/strong>: <a class=\"cursor-pointer\" target=\"_new\" rel=\"noopener\" data-start=\"1877\" data-end=\"1970\">GeeksforGeeks &#8211; Web Development Technologies<\/a><\/p>\n<\/li>\n<li data-start=\"1971\" data-end=\"2052\">\n<p data-start=\"1973\" data-end=\"2052\"><strong data-start=\"1973\" data-end=\"1994\">PHP Documentation<\/strong>: <a class=\"cursor-pointer\" target=\"_new\" rel=\"noopener\" data-start=\"1996\" data-end=\"2052\">W3Schools PHP Tutorial<\/a><\/p>\n<\/li>\n<\/ul>\n<hr data-start=\"2054\" data-end=\"2057\" \/>\n<p data-start=\"2059\" data-end=\"2137\"><span class=\"relative -mx-px my-[-0.2rem] rounded px-px py-[0.2rem] transition-colors duration-100 ease-in-out\">Understanding these technologies and how they work together is fundamental for anyone looking to delve into web development.<\/span><\/p>\n<h3 data-start=\"2059\" data-end=\"2137\"><a href=\"https:\/\/www.rgmcet.edu.in\/assets\/img\/departments\/CSE\/materials\/R15\/3-2\/Web%20Technologies.pdf\" target=\"_blank\" rel=\"noopener\">Internet and Web Technology lecture &#8211; Concept of HTML,Java Script,Php<\/a><\/h3>\n<h3 class=\"LC20lb MBeuO DKV0Md\"><a href=\"https:\/\/www.gpcet.ac.in\/wp-content\/uploads\/2018\/02\/unit-1.pdf\" target=\"_blank\" rel=\"noopener\">Lecture Notes On WEB AND INTERNET TECHNOLOGIES<\/a><\/h3>\n","protected":false},"excerpt":{"rendered":"<p>Internet and Web Technology lecture &#8211; Concept of HTML,Java Script,Php [fvplayer id=&#8221;93&#8243;] \u00a0Internet and Web Technology Lecture Concept of HTML, JavaScript, and PHP The Internet and Web Technology domain consists of three key technologies:HTML (HyperText Markup Language) \u2192 Structure of Web PagesJavaScript \u2192 Adds InteractivityPHP (Hypertext Preprocessor) \u2192 Server-Side Scripting \u00a0HTML (HyperText Markup Language) HTML [&hellip;]<\/p>\n","protected":false},"author":71,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[96],"tags":[],"class_list":["post-2745","post","type-post","status-publish","format-standard","hentry","category-internet-and-web-technology"],"_links":{"self":[{"href":"https:\/\/www.reilsolar.com\/pdf\/wp-json\/wp\/v2\/posts\/2745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.reilsolar.com\/pdf\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.reilsolar.com\/pdf\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.reilsolar.com\/pdf\/wp-json\/wp\/v2\/users\/71"}],"replies":[{"embeddable":true,"href":"https:\/\/www.reilsolar.com\/pdf\/wp-json\/wp\/v2\/comments?post=2745"}],"version-history":[{"count":0,"href":"https:\/\/www.reilsolar.com\/pdf\/wp-json\/wp\/v2\/posts\/2745\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.reilsolar.com\/pdf\/wp-json\/wp\/v2\/media?parent=2745"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.reilsolar.com\/pdf\/wp-json\/wp\/v2\/categories?post=2745"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.reilsolar.com\/pdf\/wp-json\/wp\/v2\/tags?post=2745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}