How to create a website with HTML and PHP The very basics By Alexander Niehoff

Content  What is HTML?  What is PHP?  What else do i need for a website?  CSS – Cascading Style Sheets  What is HTML?  What is PHP?  What else do i need for a website?  CSS – Cascading Style Sheets

Hypertext Markup Language

What is HTML?  Hypertext Markup Language  Text-based markup language for structuring digital content  Every browser can read HTML  Structuring of text and objects with ‘tags’   Hypertext Markup Language  Text-based markup language for structuring digital content  Every browser can read HTML  Structuring of text and objects with ‘tags’ 

HTML basic structure Content Declare this document as HTML Start of the head section Metadata like ‚author‘ or ‚keywords‘ Title that appears in the tab or topbar Start of the content section End of the content section End of HTML-code Example End of the head section Start of HTML-code

,,  ,,  HTML common tags bold, italic and underline forces a word wrap include an image or picture hyperlink (also known as ‚link‘) creates a text- or password area, or a button tags to create a table change color, font-family or size of text Further defined with ‚width‘, ‚height‘, ‚name‘, ‚value‘ …

Hypertext Preprocessor

What is PHP?  Hypertext Preprocessor, originally Personal Home Page Tools  Server-side scripting language for web development  Needs an extra program to run (like apache or nginx)  Can be simply mixed with HTML  Can connect and interact with databases  GET and transfer inserted data like text and files …   POST and transfer inserted data   Hypertext Preprocessor, originally Personal Home Page Tools  Server-side scripting language for web development  Needs an extra program to run (like apache or nginx)  Can be simply mixed with HTML  Can connect and interact with databases  GET and transfer inserted data like text and files …   POST and transfer inserted data  ?name=Alexander&lastName=Niehoff

PHP basic structure <?php $name="Alex"; echo "Your name is ". $name. ", right?"; ?> Example The PHP-Code is inside the HTML body-tag Initiation of PHP-code Definition of a variable Text output including the variable „Alex“ Marks the end of PHP-code

Example of a very basic website Click me Click me

What else is needed?

 Server (own or rented)  If own server  Fast upload and download  Properly set port forwarding on the router  Domain ( com, biz, gov, …])  Database (MySQL, Oracle, etc …)  Good sense for design  Design via CSS  Server (own or rented)  If own server  Fast upload and download  Properly set port forwarding on the router  Domain ( com, biz, gov, …])  Database (MySQL, Oracle, etc …)  Good sense for design  Design via CSS

 CSS stands for C ascading S tyle S heets  External file  Define how to display HTML elements  HTML elements should get an identifier  CSS stands for C ascading S tyle S heets  External file  Define how to display HTML elements  HTML elements should get an identifier What is CSS? HTML file cssEx.html CSS file style.css Headline one This is just some random text… body { font-family: calibri,“Times New Roman“; background-color: #C9C9C9; } h1 { font-size: 22pt; color: green; }

Thank you for your attention and have a nice day If you have any question you may ask them now